Question

我有8个总资产，而且我使用bootstrap来创建两行，每行4个，分为4行。但是，当行响应时，第4行会中断 - 资产是＆＃39 ;应该在左侧的s设置在右侧，最后的资产在左侧的新行上。所有div都设置完全相同。这段代码似乎在其他页面上工作，这就是为什么我无法弄清楚为什么这个页面会破坏。 See image for visual explanation请帮忙!!

<div class="container-fluid">
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="clear"></div>
</div>

Answer 1

<div class="container-fluid">
 <div class="row">
  <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
  <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
  <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
</div>
<div class="row">
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
 <div class="col-sm-6 col-lg-3" style="margin-bottom: 20px;">...</div>
</div>

分为两排。看看这个。

Bootstrap响应网格打破了最后一行

1 个答案: