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>。请参阅working example。

Answer 2

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

Answer 3

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

Why does the bootstrap .row has a default margin-left of -30px?

你基本上使用“clearfix”而不是“row”。它与“行”完全相同，不包括负边距。

Answer 4

我在容器类中使用了行类，但仍然存在一些问题。当我将margin-left: auto; margin-right: auto;添加到.row课程时，它运行正常。

Answer 5

对于任何未来的开发人员调试此问题：

Bootstrap为行列设置填充，因此行的所有内容都不应出现在容器外部。如果您遇到这种情况并且正在使用col -...类正确使用bootstrap的网格系统，那么很可能您在某处重置了填充列上的其他CSS。

Answer 6

@Michelle M.应该获得此答案的全部功劳。
她在其中一项评论中说：

在引导程序4中添加“ mx-auto”类可解决以下问题：我。

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

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

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

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

6 个答案: