Bootstrap Grid系统新行看起来不太好 [英] Bootstrap Grid System new line does not look nice

问题描述

最近，我开始在我的网站上创建一个管理页面来编辑多个小表（1-5个条目）。它们都显示在一个页面上，表格嵌套在div中，如下所示：

 < div class = > 
< div class =col-xs-12 col-sm-4 col-md-4> 
<！ -  table 1  - > 
< / div> 
< div class =col-xs-12 col-sm-4 col-md-4> 
<！ -  table 2  - > 
< / div> 
 ... 
< / div> 
  

我用六个表做了这个，这是如何看起来如果他们有相同的数量记录（一个表是一个黑色块）：

现在第一个表有多一个记录，第一个表更大，因此最后一个div包装到第三行：

< a href =https://i.stack.imgur.com/ohjMX.png =nofollow noreferrer>

我实际想要实现的是（如果可能的话与boostrap网格系统），第6个表不包裹到第三行，但是只是放置一点点，就像这样：

这可能以某种方式使用或不使用boostrap？

这个变体也是可以接受的，响应式布局（ EDIT ：这是通过使用@Skelly的答案）：

感谢您的建议！

解决方案

每3列。一种方法是使用Bootstrap推荐的方法，或者可以使用简单的CSS clearfix like this ..

  @media（min-width：992px）{
 .auto-clear .col- md-4：nth-​​child（3n + 1）{clear：left;} 
} 
  

演示： http://codeply.com/go/mONLiFj30T

Recently, I started making an admin page on my site to edit multiple small tables (1-5 entries). They got all displayed on one page, and the tables got nested in a div as follows:

<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 1-->
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4">
        <!--table 2-->
    </div>
    ...
</div>

I did this with six tables, and this is how it looks like if they have the same amount of records (one table is one black block):

When now the first table has one more record, the first table is larger and therefore the last div is wrapped to a third row:

What I actually want to achieve (if possible with the boostrap grid system) is that the 6th table does not get wrapped to a third line but just placed a little bit lower, just like this:

Is that possible somehow using or not using boostrap?

This variant would also be acceptable, but not using a table but a responsive layouting (EDIT: This was achieved by using @Skelly 's answer):

Thanks for advice!

解决方案

You need a "clearfix" reset every 3 columns. One way is to use the approach recommended by Bootstrap, or you can use a simple CSS clearfix like this..

@media (min-width:992px) {
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}

Demo: http://codeply.com/go/mONLiFj30T

这篇关于Bootstrap Grid系统新行看起来不太好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！