- 首页
- 前端开发
- Bootstrap Grid System 新行不好看
Bootstrap Grid System 新行不好看
[英] Bootstrap Grid System new line does not look nice
本文介绍了Bootstrap Grid System 新行不好看的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
最近，我开始在我的网站上制作一个管理页面来编辑多个小表格(1-5 个条目).它们全部显示在一页上，表格嵌套在一个 div 中，如下所示:
<div class="col-xs-12 col-sm-4 col-md-4"><!--表 1-->
<div class="col-xs-12 col-sm-4 col-md-4"><!--表 2-->
...
我用六张表做了这个，如果它们有相同数量的记录(一张表是一个黑色块)，这就是它的样子:
当现在第一个表多出一条记录时，第一个表更大，因此最后一个 div 被换到第三行:
我真正想要实现的(如果可能的话，使用 boostrap 网格系统)是第 6 个表不会被包裹到第三行，而是放置得稍微低一点，就像这样:
这可能以某种方式使用或不使用 boostrap 吗?
这个变体也是可以接受的，但不使用表格而是使用响应式布局(编辑:这是通过使用@Skelly 的答案实现的):
感谢您的建议！
<小时>
更新
我只是随机发现了一种实现第一个所需变体的可能性:您只需为每列定义一个 div 并将所有元素(在本例中为表)放在里面，这样它们就不会相互依赖.
类似的东西:
<div class="col-xs-12 col-sm-4 col-md-4"><!--表 1--><!--表 4-->
<div class="col-xs-12 col-sm-4 col-md-4"><!--表 2--><!--表 5-->
<div class="col-xs-12 col-sm-4 col-md-4"><!--表 3--><!--表 6-->
解决方案
这是由于列高不同造成的.您需要每 3 列重置一次clearfix"以强制均匀换行.一种方法是使用 Bootstrap 推荐的方法，或者在这种特定情况下您可以使用像这样简单的 CSS clearfix..
@media (min-width:992px) {.auto-clear .col-md-4:nth-child(3n+1){clear:left;}}
演示:http://codeply.com/go/mONLiFj30T
对于具有不同 col 宽度和网格层的其他clearfix"场景，有一个 通用 CSS 仅 clearfix解决方案适合更多场景(不支持).
另一种解决方案是 CSS 列，用于砌体"样式布局，但它不使用 Bootstrap 网格:http://www.bootply.com/mYkzRDvbEq
查看我对这个问题更完整的回答
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!
UPDATE
I just randomly found out one possibility to achieve the first desired variant: You just define one div per column and place all the elements (in this case tables) inside, so they don't rely on each other.
Something like that:
<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>
解决方案
This is due to varying column height. You need a "clearfix" reset every 3 columns to force even wrapping. One way is to use the approach recommended by Bootstrap, or in this specific case 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
For other "clearfix" scenarios with different col width and grid tiers, there is a universal CSS only clearfix solution which will fit more scenarios (unsupported).
Another solution would be CSS columns, for a "masonry" style layout, but it doesn't use the Bootstrap grid:
http://www.bootply.com/mYkzRDvbEq
See my more complete answer on this issue
这篇关于Bootstrap Grid System 新行不好看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
