网格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>

更新

当列的高度不同时，以上布局将中断。或更具体地讲，如果其中一个比行中的下一个高。例如，将第一行的第二列设置为100px的高度将为您提供：

要解决此问题，您必须应用“ 响应式”列重置。这样做以上将成为：

<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>