twitter-bootstrap Bootstrap v3 网格系统中行内单列的最佳实践？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18854586/
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
Best practice for single column within row in bootstrap v3 grid system?
提问by user2788141
I've read about the grid system here: http://getbootstrap.com/css/#grid. While the documentation doesn't directly address a scenario in which there's one column within a row, I do see one example of this here: http://getbootstrap.com/css/#grid-offsetting> third row of the example code.
我在这里阅读了有关网格系统的信息：http: //getbootstrap.com/css/#grid。虽然文档没有直接解决一行中有一个列的情况，但我确实在此处看到了一个示例：http: //getbootstrap.com/css/#grid-offsetting> 示例代码的第三行。
Currently, I'm applying the class .col-xs-12 to the one column within the containing tags and it is working well across all viewport dimensions. However, I want to ensure there isn't a better way to do this.
目前，我将类 .col-xs-12 应用于包含标签中的一列，并且它在所有视口维度上都运行良好。但是，我想确保没有更好的方法来做到这一点。
Thanks!
谢谢！
回答by Bass Jobsen
I think adding a col*-12 will be the best practice. It will make all rows in your grid act the same.
我认为添加 col*-12 将是最佳实践。它将使网格中的所有行都具有相同的行为。
Example:
例子：
html
html
<div class="container">
<div class="row" style="background-color:yellow;">
<div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
</div>
</div>
<div class="container">
<div class="row" style="background-color:yellow;">
direct inside a row
</div>
</div>
<div class="container">
<div class="row" style="background-color:yellow;">
<div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
<div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
</div>
</div>
As you see the content is NOT in line with the other rows when you don't add a col-*-12 (due to the missing padding). All the rows the same will make future changes easier.
如您所见，当您不添加 col-*-12（由于缺少填充）时，内容与其他行不一致。所有行相同将使未来的更改更容易。
You will have to notice the col*-12 columns differs from the other col--cause the don't have a float left, see: https://github.com/twbs/bootstrap/issues/10152
您必须注意到 col*-12 列与其他列不同-因为没有浮动左侧，请参阅：https: //github.com/twbs/bootstrap/issues/10152
回答by Alexander Rechsteiner
Well, if you only have one element and want it to use the full width of the container (1170px) then you probably don't need the .row/.col-xs-12 at all.
好吧，如果您只有一个元素并希望它使用容器的整个宽度（1170 像素），那么您可能根本不需要 .row/.col-xs-12。
See this Example, check out the source code of the page itself.
请参阅此示例，查看页面本身的源代码。
Notice how the content on top doesn't use rows/cols?
请注意顶部的内容如何不使用行/列？
<div class="container">
...
<h3>Three equal columns</h3>
<p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
In this case, the row/cols wouldn't do anything except add negative margin (row) and padding (col).
在这种情况下，行/列除了添加负边距（行）和填充（列）外不会做任何事情。
Also, the example you're pointing out uses offsetting, and is not full width, so the row/col is required.
此外，您指出的示例使用偏移，并且不是全宽，因此需要行/列。
回答by Typo
I know it's a little late but the answers above didn't consider the grid offsetting classes
我知道有点晚了，但上面的答案没有考虑网格偏移类
You could center a column with something like this:
您可以使用以下内容将列居中：
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>
回答by MartinDubeNet
Just to put a last nail in the coffin, you REALLY need the combo of class row+ col-12for single column layout to keep consistency with other multi-column rows that you may have in your layout. This prevents miss alignment in layouts where a designer may request custom external gutters that differs from inner column gutter.
只是为了在棺材上钉上最后一颗钉子，您真的需要 class row+的组合来col-12进行单列布局，以保持与布局中可能具有的其他多列行的一致性。这可以防止布局中的未对齐，在这种情况下，设计人员可能会请求与内列装订线不同的自定义外部装订线。
Here's a link to my proof of concept : https://codepen.io/martindubenet/full/OJVwEWv
这是我的概念证明的链接：https: //codepen.io/martindubenet/full/OJVwEWv
