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

我刚开始使用 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/

99802 次浏览
小开
最佳答案

在所有的栅格系统中，每根柱子之间都有水槽。Bootstrap 的系统在每列的左边和右边都设置了15px 的填充，以创建这个排水沟。

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

The .row div 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.

更新:

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

小开

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

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

You basically use "clearfix" instead of "row". It does the exact same as "row" excluding the negative margin.

小开

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

小开

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

Bootstrap 设置行列的填充，因此行的任何内容都不应出现在容器外。如果您正在经历这种情况，并且正确地使用 col- ... 类使用了 bootstrap 的网格系统，那么很可能在某个地方重新设置了列上的填充。

小开

使用引导程序3.3.7，这个问题被解决了用 .container-fluid包装 .row。

小开

@ 米歇尔 M 应该得到这个答案的全部学分。
她在一篇评论中说:

在 bootstrap 4中添加‘ mx-auto’类修复了 我。

您需要像下面这样更新您的第一个 div元素:

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

不需要为所有嵌套行(如果有的话)这样做。
只需将 mx-auto添加到最外层的 row(或行) ，以避免垂直滚动条。
不要通过添加“行”类替换边距来覆盖所有引导程序行的行为。


提交答案