最近,我开始在自己的网站上创建一个管理页面,以编辑多个小表(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>
更新
我只是随机发现了一种实现第一个所需变体的可能性:您只需为每列定义一个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”以强制进行换行。一种方法是使用Bootstrap推荐的方法,或者在这种特定情况下,您可以使用像这样的简单CSS clearfix。
@media (min-width:992px) { .auto-clear .col-md-4:nth-child(3n+1){clear:left;} }
对于其他具有不同col宽度和网格层的“ clearfix”方案,有一个通用的CSS only clearfix解决方案,它将适合更多方案(不受支持)。