122

我刚开始使用 Bootstrap 3。我很难理解行类是如何工作的。有没有办法避免padding-leftand 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/

4

6 回答 6

160

在所有网格系统中，每列之间都有排水沟。Bootstrap 的系统在每列的左侧和右侧都设置了 15px 的填充来创建这个排水沟。

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

.rowdiv 永远不应该真正用于保存除网格列之外的任何内容。如果是这样，您将看到内容相对于任何列发生了变化，这在您的小提琴中很明显。

更新：

我回答后你修改了你的问题，所以这里是你现在问的问题的答案：将.container类添加到第一个<div>. 请参阅工作示例。

于 2013-09-23T21:47:42.240 回答
29

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

于 2017-01-12T17:38:24.213 回答
20

我在容器类中使用了行类，但仍然有一些问题。当我添加margin-left: auto; margin-right: auto;到.row班级时，它工作得很好。

于 2016-08-09T03:42:25.603 回答
19

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

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

您基本上使用“clearfix”而不是“row”。除了负边距之外，它与“行”完全相同。

于 2014-01-31T16:49:17.357 回答
4

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

在引导程序 4 中添加“mx-auto”类为我解决了溢出问题。

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

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

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

于 2019-06-03T04:59:47.173 回答
1

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

Bootstrap 设置行列的填充，因此行的任何内容都不应出现在容器之外。如果您遇到这种情况，并且您正在使用 col-... 类正确使用引导程序的网格系统，则很可能您在某处有额外的 CSS 来重置列上的填充。

于 2016-11-18T00:42:03.610 回答