Twitter bootstrap 网格4到3到2

我正在尝试使用Bootstrap3创建一个网格，每个单元格都会有这个内容

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

1.
2.
3.
4.
1.
2.
3.
4.

更新

当列的高度不相同时，上述布局将中断。或者更具体地说，当一个比行中的下一个高时。例如，给第一行中的第二列一个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>

1.
2.
3.
4.
1.
2.
3.
4.

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

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