我正在尝试使用 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
在同一行中添加所有内容，例如：
<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 的高度将为您提供：
要解决此问题，您必须应用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>