twitter-bootstrap Bootstrap 每行的网格列数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22863495/
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's grid columns number per row
提问by Rommy
Bootstrap comes with a 12 columns grid system that must be placed within rows.
Bootstrap 带有一个 12 列的网格系统，必须放置在行内。
My question is, does the column number / row must be 12 (or less), or can I have a layout like the following
我的问题是，列号/行是否必须为 12（或更少），或者我可以有如下布局
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
My understanding was that columns number within a row mustn't exceed 12, so based on my previous snippet, I would have made something like this
我的理解是一行中的列数不能超过 12，所以根据我之前的片段，我会做这样的事情
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Is there anything I missed ?
有什么我错过的吗？
回答by Patrick McDonald
Bootstrap allows you to "stack columns", the following is taken from their docs:
Bootstrap 允许您“堆叠列”，以下内容来自他们的文档：
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Also from their docs:
同样来自他们的文档：
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
由于有四层网格可用，您一定会遇到问题，在某些断点处，您的列不能完全清除，因为一个比另一个高。要解决这个问题，请结合使用 .clearfix 和我们的响应式实用程序类。
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
Here, the col-xs values add up to 24, with a clearfix adding the required break
在这里，col-xs 值加起来为 24，使用 clearfix 添加所需的中断
回答by Warren Parks
Patrick answer is correct but wanted to go into more detail since I was confused after reading documentation.
帕特里克的回答是正确的，但想更详细地说明，因为我在阅读文档后感到困惑。
Depending on what you're going for having more than 12 columns without doing specific divs for multiple rows can make sense.
根据您要拥有 12 列以上而不为多行执行特定 div 的目的而定。
- 12 columns is as much as you can fit on 1 row.
- More than 12 columns will cause multiple rows.
- By default when you go down to the XS size it acts like col-xs-12. This is where you see it stacking the columns. You can change this behavior if you add a col-xs-n
- 12 列是 1 行所能容纳的数量。
- 超过 12 列将导致多行。
- 默认情况下，当您缩小到 XS 尺寸时，它的作用类似于 col-xs-12。这是您看到它堆叠列的地方。如果添加 col-xs-n，则可以更改此行为
More detailed jsfiddle Example
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-2">
Navigation
</div>
<div class="col-sm-6 col-md-5">
Editor
</div>
<div class="col-sm-6 col-md-5">
Display
</div>
</div>
</div>
In this example when viewing at medium size you see first column take up 2 columns and then the other two divs split the remaining columns. When you shrink it down to small the first div will then be a whole new row and the remaining divs will split 50/50. Then when you shrink down further to xs it will still do default behavior and stack columns evenly.
在此示例中，当以中等大小查看时，您会看到第一列占据 2 列，然后其他两个 div 拆分剩余的列。当您将其缩小到较小时，第一个 div 将成为一个全新的行，其余 div 将拆分 50/50。然后，当您进一步缩小到 xs 时，它仍然会执行默认行为并均匀地堆叠列。
It makes sense to use this approach when you want all columns on one row in one resolution but want multiple rows in a different resolution. If you always want two rows then it would make more sense to make separate divs for each row.
当您希望以一种分辨率在一行上显示所有列但希望以不同分辨率显示多行时，使用这种方法是有意义的。如果您总是想要两行，那么为每一行制作单独的 div 会更有意义。
回答by SW4
Yes and no...
是与否...
See example fiddle
参见示例小提琴
You canhave a layout like the one you specify, however it wont necessarily work per Bootstraps intended functionality, and as such its usually a good idea to follow their recommended row structure.
您可以使用您指定的布局，但是它不一定能按照 Bootstrap 的预期功能工作，因此遵循他们推荐的行结构通常是一个好主意。
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Bootstrap 包括一个响应迅速、移动优先的流体网格系统，随着设备或视口大小的增加，它可以适当地扩展到 12 列。
Instead of
代替
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
You should do, e.g:
你应该这样做，例如：
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
Within a row, the sum of the numbers following the hyphen in each column definition should add up to 12.
在一行中，每个列定义中连字符后面的数字总和应为 12。
回答by Pinny
However.... if you decide to use their (Bootstrap's ) less fies, then you can set the @grid-columns to any value, not just 12. http://getbootstrap.com/customize/#grid-system
但是....如果你决定使用自己的（引导的）更少的外商投资企业，那么你可以设置@格列任何价值，而不仅仅是12 http://getbootstrap.com/customize/#grid-system
回答by Xahed Kamal
If you are using Bootstrap 4, you create a custom 10 columns grid easily, using their SASS mixins for the grid.
如果您使用的是 Bootstrap 4，您可以轻松地创建一个自定义的 10 列网格，使用它们的 SASS mixin 作为网格。
$grid-columns: 10; // This is where you define the number of columns you need/want
@if $enable-grid-classes {
.row-odd-col {
@include make-row();
> {
@if $enable-grid-classes {
@include make-grid-columns();
}
}
}
}
You can then use them like this-
然后你可以像这样使用它们 -
<div class="row-odd-col">
<div class="col-md-5 col-lg-2">1</div>
<div class="col-md-5 col-lg-2">2</div>
<div class="col-md-5 col-lg-2">3</div>
<div class="col-md-5 col-lg-2">4</div>
<div class="col-md-5 col-lg-2">5</div>
</div>
For more details, check here - https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
有关更多详细信息，请在此处查看 - https://getbootstrap.com/docs/4.0/layout/grid/#sass-mixins
回答by krishna Tyagi
For making a responsive design of a website, first learn bootstrap or css grid layouts. It is also a good approach for making a responsive design. With bootstrap firstly learn grid system and learn the. Max an min widths for different devices and then set no. Of columns for each device and also set @media (min-widtth: px) and (max-width: px) {}
要制作网站的响应式设计，首先要学习引导程序或 css 网格布局。这也是制作响应式设计的好方法。用bootstrap先学习grid system再学习。不同设备的最大最小宽度，然后设置不。每个设备的列数，并设置@media (min-widtth: px) 和 (max-width: px) {}
And set individuals property for each device like phones, tablets, laptop and desktops for perfect fit.
并为每个设备（如手机、平板电脑、笔记本电脑和台式机）设置个人属性以使其完美契合。
回答by NateShumate
Yes the sum of all columns in a row must be 12 or less. The answer above is correct, using:
是的，一行中所有列的总和必须为 12 或更少。上面的答案是正确的，使用：
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
<div class="col-md-2"></div>
</div>
will give you the same effect as your example above. 12 columns is pretty standard across most CSS grid systems.
会给你和你上面的例子一样的效果。12 列在大多数 CSS 网格系统中是非常标准的。
