網4以3比2

Question

我試圖讓使用引導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> 

更新

當您的列沒有山姆時，上述佈局將會中斷高度。或者當一個人比下一個人高時更具體。例如給在第一行的第二列的100像素的高度會給你：

爲了解決這個問題，你必須應用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>