どういうわけか私はリストとしてフォーマットしたコードを完成させる方法を得ることができず、javascriptによって切り替えられるグリッドとしてもフォーマットする必要があります。
以下の私のHTMLコードは、リストコンテンツに使用されます
<div class="list">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
リストのCSSコード。他のすべてのCSSはブートストラップによって取得されます
.styled_view div.list {
padding: 0;
width: 100%;
}
gridを示すために同じコードを使用する必要があります
<div class="grid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
グリッドのCSS
.styled_view div.grid {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 19.4%;
}
ギャラリーの各部分の19.4%は、DIVを次に並べます。新しい行にプッシュしません。どうすれば解決できますか?
行分割を行います。
このような
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="grid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div>
</div>
</div>