twitter-bootstrap - グリッド 4 対 3 対 2

Question

Bootstrap 3 を使用してグリッドを作成しようとしていますが、各セルにはこのコンテンツが含まれます

<a href="/venue/{$venue.urlname}/">
    <div style="position:relative;">
        <img alt="{$venue.name}" src="/files/sivticketsvenues/36/QRbDeQYa_full.jpg" style="width: 50%;" />
        <p style="position:absolute;top:0;left:0;right:0;background-color:#000;color:#FFF;opacity:0.75;padding:10px;">{$venue.name}</p>
    </div>
</a>

これに適した列は何ですか? 私は試した

<div class="col-lg-3 col-md-4 col-sm-6">

これは4と2で機能しましたが、3列では次のようにレイアウトされました

1 2 3
4
5 6 7
8

Answer 1

次のように、すべてを同じ行に追加します。

<div class="container"> 
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">1</div>
<div class="col-lg-3 col-md-4 col-sm-6">2</div>
<div class="col-lg-3 col-md-4 col-sm-6">3</div>
<div class="col-lg-3 col-md-4 col-sm-6">4</div>
<div class="col-lg-3 col-md-4 col-sm-6">1</div>
<div class="col-lg-3 col-md-4 col-sm-6">2</div>
<div class="col-lg-3 col-md-4 col-sm-6">3</div>
<div class="col-lg-3 col-md-4 col-sm-6">4</div>
</div>
</div>

アップデート

列の高さが同じでない場合、上記のレイアウトは壊れます。または、行内の次のものよりも背が高い場合は、より具体的です。たとえば、最初の行の 2 番目の列に 100px の高さを指定すると、次のようになります。

これを修正するには、Responsive column resetsを適用する必要があります。これを行うと、上記は次のようになります。

<div class="container"> 
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:blue;">1</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red;height:100px;">2</div>
<div class="clearfix visible-sm"></div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow;">3</div>
<div class="clearfix visible-md"></div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green;">4</div>
<div class="clearfix visible-sm visible-lg"></div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:blue;height:100px;">1</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:red;">2</div>
<div class="clearfix visible-sm visible-md"></div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:yellow;">3</div>
<div class="col-lg-3 col-md-4 col-sm-6" style="background-color:green;">4</div>
<div class="clearfix visible-sm visible-lg"></div>
</div>
</div>