最近,我开始在我的网站上制作一个管理页面来编辑多个小表格(1-5 个条目)。它们全部显示在一页上,表格嵌套在一个 div 中,如下所示:
<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>
我用六个表做了这个,如果它们有相同数量的记录(一个表是一个黑色 block ),它看起来是这样的:
现在第一个表有更多记录时,第一个表更大,因此最后一个 div 被包装到第三行:
我真正想要实现的(如果可能的话,使用 boostrap 网格系统)是第 6 个表不会换行到第三行,而是放得稍微低一点,就像这样:
这有可能以某种方式使用或不使用 boostrap 吗?
这种变体也是可以接受的,但不是使用表格而是响应式布局(编辑:这是通过使用@Skelly 的回答实现的):
多谢指教!
更新
我只是随机发现了一种实现第一个所需变体的可能性:您只需为每列定义一个 div 并将所有元素(在本例中为表格)放入其中,这样它们就不会相互依赖。
类似的东西:
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 1-->
<!--table 4-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 2-->
<!--table 5-->
</div>
<div class="col-xs-12 col-sm-4 col-md-4">
<!--table 3-->
<!--table 6-->
</div>
</div>
最佳答案
这是由于列高不同所致。您需要每 3 列重置一次“clearfix”以强制均匀换行。一种方法是使用 approach recommended by Bootstrap ,或者在这种特定情况下,您可以使用像这样的简单 CSS clearfix..
@media (min-width:992px) {
.auto-clear .col-md-4:nth-child(3n+1){clear:left;}
}
演示:http://codeply.com/go/mONLiFj30T
对于其他具有不同列宽度和网格层的“clearfix”场景,有一个 universal CSS only clearfix solution 将适合更多场景(不支持)。
另一个解决方案是 CSS 列,用于“砌体”样式布局,但它不使用 Bootstrap 网格: http://www.bootply.com/mYkzRDvbEq
关于css - Bootstrap Grid System 新行看起来不太好,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38730889/