twitter-bootstrap Bootstrap 3 - 为什么行类比它的容器宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18969051/
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 - Why is row class is wider than its container?
提问by Petran
I just started using Bootstrap 3. I am having a difficult time
understanding how the row class works.
Is there a way to avoid the padding-leftand padding-right?
我刚开始使用 Bootstrap 3。我很难理解 row 类的工作原理。有没有办法避免padding-left和padding-right？
<div class="row" style="background:#000000">
<div class="col-xs-4 .col-xs-offset-1">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
<div class="col-xs-2">
col
</div>
</div>
回答by Sean Ryan
In all grid systems, there are gutters between each column. Bootstrap's system sets a 15px padding on both the left and the right of each column to create this gutter.
在所有网格系统中，每列之间都有装订线。Bootstrap 的系统在每列的左侧和右侧设置了一个 15px 的填充来创建这个装订线。
The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .firstor .lastclass on those columns as some grid systems do, they instead set the .rowclass to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.
问题是第一列左边不应该有半个装订线，最后一列右边不应该有半个装订线。它们不像某些网格系统那样在这些列上使用某种.first或.last类，而是将.row类设置为具有与列的填充匹配的负边距。这将“拉”出第一列和最后一列的排水沟，同时使其更宽。
The .rowdiv should never really be used to hold anything other than grid columns. If it is, you will see the content shifted relative to any columns, as is evident in your fiddle.
该.rowDIV应该从来没有真正被用来比格列其他嫌弃。如果是，您将看到内容相对于任何列移动，这在您的小提琴中很明显。
UPDATE:
更新：
You modified your question after I answered, so here is the answer to the question you are now asking: Add the .containerclass to the first <div>. See working example.
在我回答之后你修改了你的问题，所以这里是你现在问的问题的答案：将.container类添加到第一个<div>. 请参阅工作示例。
回答by dbarma
With bootstrap 3.3.7 this problem is solved wrapping the .row with .container-fluid.
在 bootstrap 3.3.7 中，这个问题通过用 .container-fluid 包装 .row 解决了。
回答by Kyle
See my reply below to similar post.
请参阅下面我对类似帖子的回复。
Why does the bootstrap .row has a default margin-left of -30px?
为什么 bootstrap .row 的默认 margin-left 为 -30px？
You basically use "clearfix" instead of "row". It does the exact same as "row" excluding the negative margin.
您基本上使用“clearfix”而不是“row”。它与“行”完全相同，不包括负边距。
回答by Jeffrey
I used the row class inside the container class and still had the some problem. When I added margin-left: auto; margin-right: auto;to the .rowclass it worked fine.
我在容器类中使用了行类，但仍然存在一些问题。当我加入margin-left: auto; margin-right: auto;到.row类它能正常工作。
回答by MikeTeeVee
@Michelle M. should receive full credit for this Answer.
She said in one of the Comments:
@Michelle M. 应该获得此答案的全部功劳。
她在其中一条评论中说：
Adding the 'mx-auto' class in bootstrap 4 fixed the overflow issue for me.
在引导程序 4 中添加“mx-auto”类为我修复了溢出问题。
You would need to update your first divElement like so:
你需要div像这样更新你的第一个元素：
<div class="row mx-auto" style="background:#000000">
No need to do this for all Nested-Rows (if you have them).
Just add mx-autoto the most-outer row(or Rows) to avoid the Vertical-Scrollbar.
Do not Override the behavior of all Bootstrap Rows by adding a "row" class to replace the Margins.
无需为所有嵌套行（如果有）执行此操作。
只需添加mx-auto到最外层row（或行）以避免垂直滚动条。
不要通过添加“行”类来替换边距来覆盖所有引导行的行为。
回答by JSideris
For any future developers debugging this problem:
对于任何未来的开发人员调试此问题：
Bootstrap sets the padding for row columns, so none of the contents of a row should appear outside the container. If you're experiencing this and you are using bootstrap's grid system correctly using the col-... classes, it's likely that you have additional CSS somewhere resetting the padding on the columns.
Bootstrap 设置行列的填充，因此行的任何内容都不应出现在容器之外。如果您遇到这种情况并且您正在使用 col-... 类正确使用引导程序的网格系统，则很可能您在某处重置了列上的填充时有额外的 CSS。
