CSS Bootstrap 3 - 连续使用超过 12 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26679160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 - Use more than 12 columns in a row
提问by asleep
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.
我遇到了一种情况，我被要求不要限制一行中的列数，因为可能会有多个内容块从管理中的位置添加到该区域。
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.
默认情况下，BS3 的行为告诉 12 列 div 不要浮动，这会导致它们越过较小的浮动 div 的顶部。所以我已经为我的系统编写了一个覆盖类，并认为我会分享以防其他人遇到问题。
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.
如果有人有更好的想法或建议，我很想感觉我不是在攻击 Bootstrap ......但这是我解决它的方法。
? /* 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>
回答by Zim
There is nothing wrong with using morethan 12 column units in .row, and in fact the Bootstrap docs state:
没有什么错误使用更比12个单位.row，而实际上引导文档状态：
"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"
“如果在一行中放置超过 12 列，每组额外的列将作为一个单元换行到一个新行上”
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 .rowdiv which is simply a grouping of columns.
文档中还有一些示例说明了为什么需要这种“列包装”：https: //getbootstrap.com/docs/3.3/css/#grid-example-wrapping。一个.row.标签中可以有超过 12 个单位，但请记住，您可能需要使用响应式重置。12 个单位是视觉行的限制（水平跨视口），但不一定是一个.rowdiv，它只是一组列。
Read more about the Bootstrap grid, and why more than 12 in a row is often necessary.
阅读有关Bootstrap 网格的更多信息，以及为什么通常需要连续 12 个以上的网格。
回答by zessx
Bootstrap was made for a 12-col usage.
Bootstrap 是为 12 列使用而设计的。
If you want to have more columns, you need to define your custom responsive grid, with the help of Bootstrap Less variables (see here). You'll mainly need to change these variables :
如果您想拥有更多列，则需要在 Bootstrap Less 变量的帮助下定义您的自定义响应式网格（请参阅此处）。您主要需要更改这些变量：
@grid-columns: Number of columns in the grid.@grid-gutter-widthPadding between columns. Gets divided in half for the left and right.
@grid-columns：网格中的列数。@grid-gutter-width列之间的填充。左右分成两半。
回答by Sachin Kanungo
If you need flexibility and responsiveness with large number of grids you can use dead-simple-grid https://github.com/mourner/dead-simple-gridand also try to minimize use of media queries in grids and let flow with
如果您需要大量网格的灵活性和响应性，您可以使用 dead-simple-grid https://github.com/mourner/dead-simple-grid并尝试尽量减少网格中媒体查询的使用，并让其流动
max-width:100%;
float:left;