网格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的高度将为您提供：

要解决此问题，您必须应用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>