Bootstrap 3-连续使用超过12列 [英] Bootstrap 3 - Use more than 12 columns in a row
问题描述
我遇到这样一种情况,要求我不限制一行中的列数,因为可能会从管理员的位置向该区域添加多个内容块.
I ran into a situation where I was required not to limit the number of columns in a row since potentially multiple blocks of content would be added to the area from places in the admin.
默认情况下,BS3的行为告诉12列div不浮动,这导致它们越过较小的浮动div的顶部.因此,我为系统编写了一个替代类,并认为如果其他人遇到问题,我会分享.
By default BS3's behavior tells 12 column divs not to float which causes them to go over the top of the smaller floated divs. So I've written an override as a class for my system and thought I would share in case anyone else has the issue.
如果有人有更好的主意或建议,我很想感觉自己不是在入侵Bootstrap……但是,这就是我的解决方法.
If anyone has a better idea or suggestion I would love to feel like I'm not hacking Bootstrap ... but here's how I solved it.
/* col-xs float fix for large column groups */
.large-group .col-xs-12 {
float: left;
}
/* col-sm float fix for large column groups */
@media (min-width: 768px) {
.large-group .col-sm-12 {
float: left;
}
}
/* col-md float fix for large column groups */
@media (min-width: 992px) {
.large-group .col-md-12 {
float: left;
}
}
/* col-lg float fix for large column groups */
@media (min-width: 1200px) {
.large-group .col-lg-12 {
float: left;
}
}
<div class="container">
<div class="row large-group" style="background-color:#ebebeb;">
<div class="col-xs-9"><div style="background-color:#babeee;"><p>col 9</p></div></div>
<div class="col-xs-3"><div style="background-color:#fefeeb;"><p>col 3</p></div></div>
<div class="col-xs-12"><div style="background-color:#bada55;"><p>col 12</p></div></div>
</div>
</div>
推荐答案
在.row
中使用超过12个列单元的更多并没有错,事实上,Bootstrap文档指出:>
There is nothing wrong with using more than 12 column units in .row
, and in fact the Bootstrap docs state:
如果一行中放置12列以上,则每组额外的列将作为一个单元包装到新行上"
"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"
There are also examples in the docs that demonstrate why this "column wrapping" in necessary: https://getbootstrap.com/docs/3.3/css/#grid-example-wrapping. It's ok to have more that 12 units in a single .row.
tag, just remember you may need to use responsive resets. 12 units is a limit of the visual row (horizontally across the viewport), but not necessarily a .row
div which is simply a grouping of columns.
详细了解引导网格,为什么连续超过12个是为什么?经常需要.
这篇关于Bootstrap 3-连续使用超过12列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!