Bootstrap 3 - 为什么行类比其容器宽？

Question

我刚开始使用Bootstrap 3.我很难理解行类的工作原理.有没有办法避免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>

http://jsfiddle.net/petran/rdRpx/

Answer 1

在所有网格系统中,每列之间都有排水沟.Bootstrap的系统在每列的左侧和右侧设置15px填充以创建此装订线.

问题是第一列不应该在左边有半个排水沟,而最后一个不应该在右边有半个排水沟.不像某些网格系统那样在这些列上使用某种类.first或.last类,而是将.row类设置为具有与列的填充匹配的负边距.这会将排水管从第一列和最后一列"拉出",同时使其更宽.

.row除了网格列之外,div永远不应该用于保存任何东西.如果是,您将看到相对于任何列移动的内容,这在您的小提琴中很明显.

更新:

在我回答之后你修改了你的问题,所以这里是你现在要问的问题的答案:将.container类添加到第一个<div>.见工作示例.

Answer 2

使用bootstrap 3.3.7解决了这个问题,用.container-fluid包装.row.

Answer 3

请参阅下面我对类似帖子的回复.

为什么bootstrap .row的默认边距为-30px？

你基本上使用"clearfix"而不是"row".它与"行"完全相同,不包括负边距.

Answer 4

我在容器类中使用了行类,但仍然存在一些问题.当我加入margin-left: auto; margin-right: auto;到.row类它能正常工作.

Answer 5

@Michelle M. 应获得此答案的满分。
她在其中一篇评论中说道：

在 Bootstrap 4 中添加“mx-auto”类解决了我的溢出问题。

您需要div像这样更新您的第一个元素：

<div class="row mx-auto" style="background:#000000">

无需对所有嵌套行（如果有）执行此操作。
只需添加mx-auto到最外层row（或行）即可避免垂直滚动条。
不要通过添加“行”类来替换边距来覆盖所有引导行的行为。