Bootstrap 行类包含 margin-left 和 margin-right 这会产生问题

Posted 2023-03-06

【中文标题】Bootstrap 行类包含 margin-left 和 margin-right 这会产生问题

【英文标题】：Bootstrap row class contains margin-left and margin-right which creates problems

【发布时间】：2014-06-02 22:14:03

【问题描述】：

我正在使用 Bootstrap 'row' 类将 divs 一个在另一个上对齐，效果很好，但是

.row 
   margin-left: -15px;
   margin-right: -15px;
 

我注意到它指定 margin-left 和 margin-right 属性为 -13px，因为我的内容向左移动。所以我所做的是添加了另一个类，如下所示：

.row-no-margin 
   margin-left: 0px;
   margin-right: 0px;
 

这解决了目的，但我仍然想知道'margin-left: -15px;'是否有任何具体原因。解决我的问题的最佳方法是什么。

【参考方案1】：

.row 用于在container 中使用。由于container 具有用于调整.row 中的负边距的填充，因此.row 内部使用的网格列可以调整为容器的整个宽度。请参阅 Bootstrap 文档：http://getbootstrap.com/css/#grid

这里有一个例子来说明：https://codeply.com/p/zHFaC7JR5K

因此，更好的解决方案可能是您将.row 放在.container 或.container-fluid 中

【讨论】：

会将我的内容包装在 '.container-fluid' 中，谢谢 :)

这就是我要找的。谢谢！

或者只使用.clearfix 而不是.row。它做同样的事情，但两边没有边距。

感谢@Bardyl，这对我来说似乎是获得所需结果的最简单的解决方案。

当心，虽然 clearfix 一开始似乎可以工作，但它是not meant for containing grid cols，会导致improper spacing。此外，容器是响应式的，可以有不同的宽度。

【参考方案2】：

您创建的任何行，将每一行包装在容器 div 中以解决问题。

<!-- row 1 -->

<div class="container">
<div class="row"></div>
</div>

 <!-- row 2 -->

<div class="container">
<div class="row"></div>
</div>

【参考方案3】：

删除所有行的边距：

.row 
    margin: 0px !important;

【参考方案4】：

这是您的简单答案

转到您想要给负边距的班级，然后将其复制并粘贴到班级中。

负边距顶部示例

mt-n3

负边距底部示例

mb-n2

【参考方案5】：

老话题，但我想我找到了另一个下降解决方案。将class="row" 添加到 div 将产生以下 CSS 配置：

.row 
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;

我们希望保留前 3 条规则，我们可以使用 class="d-flex flex-wrap" 来做到这一点（请参阅 https://getbootstrap.com/docs/4.1/utilities/flex/）：

.flex-wrap 
    flex-wrap: wrap !important;

.d-flex 
    display: -webkit-box !important;
    display: flex !important;

虽然它添加了 !important 规则，但在大多数情况下它应该不是问题...

【参考方案6】：

老话题了，但我最近受到了这个影响。

使用类“row-fluid”而不是“row”对我来说效果很好，但我不确定它是否得到完全支持。

所以在阅读Why does the bootstrap .row has a default margin-left of -30px 之后，我只使用了<div>（没有任何行类），它的行为与<div class="row-fluid"> 完全一样

【参考方案7】：

我遇到了同样的问题，最初，我删除了该行的左右 -ve 边距并删除了水平滚动，但这并不好。然后经过 45 分钟的检查和搜索，我发现我正在使用 container-fluid 并且正在移除填充，并且它的内行有左右负边距。所以我给了 container-fluid 它的填充物，一切都恢复了正常。

如果您确实需要删除容器流体填充，请不要只删除项目中每一行的左右负边距，而是引入一个类并在所需容器上使用它

【参考方案8】：

我用过 div class="表单控制" 代替 div class="行"

这对我来说是固定的。

【参考方案9】：

你可以使用 row-fluid 代替 row，那么你就不会有这个问题了。 （对于以前版本的引导程序）

我不确定最近的版本 3，无论如何：

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

有关此的更多信息 Why does the bootstrap .row has a default margin-left of -30px?

【讨论】：

row-fluid 在最新版本中不再使用.. Bootstrap 3

@Gaurav 是的，行流体在 Bootstrap v3.1.1 中不存在

@Baghoo，所以有 3 个人对您关于 +1 的 Gaurav 的评论表示支持，但他只有两个支持（和一个反对！）。我认为有两个 SO 用户在这里投票不明智:) 另外你什么时候从 skelly 更改了你的用户名？另外，感谢 Bootply。

@KyleMit - 哇，这是一些不错的侦探工作。我上周改了。感谢您提到 Bootply :-)

【参考方案10】：

您使用的是 Bootstrap 3 吗？我的css版本有-15px，而不是-13px。无论如何，我只是完成了你所做的事情，并覆盖了样式。 我相信这是因为 .container 类在左右两侧都有 15px 的填充，而行上的负边距会将内容拉回容器的边缘。