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

Question

我正在使用 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;

'。解决我的问题的最佳方法是什么。

Answer 1

.row

旨在在

container

内使用。由于

container

具有填充功能来调整

.row

中的负边距，因此

.row

内部使用的网格列可以调整为容器的整个宽度。请参阅Bootstrap 文档。

这里举个例子来说明一下

因此，更好的解决方案可能是您将

.row

放在

.container

或

.container-fluid

中

Answer 2

你可以使用row-fluid代替row，那么就不会出现这个问题了。 （适用于以前版本的 bootstrap）

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

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

欲了解更多相关信息 为什么 bootstrap .row 的默认 margin-left 为 -30px？

Answer 3

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

Answer 4

老话题，但我想我找到了另一个下降解决方案。将

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;
}

它添加了！重要的规则，但在大多数情况下这应该不是问题......

Answer 5

这是您简单易懂的答案

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

负边距顶部示例

mt-n3

负保证金底部示例

mb-n2

Answer 6

老话题，但我最近受此影响。

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

因此，在阅读完为什么 bootstrap .row 的默认 margin-left 为 -30px 我刚刚使用了

<div>

（没有任何行类），它的行为与

<div class="row-fluid">

完全相同

Answer 7

您创建的任何行，将每行包装在容器 div 内即可解决问题。

<!-- row 1 -->

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

 <!-- row 2 -->

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

Answer 8

我面临着同样的问题，最初，我删除了行的左右边距，并删除了水平滚动，但这并不好。然后经过 45 分钟的检查和搜索，我发现我使用的是容器流体，并且正在删除填充，并且其内行有左右负边距。所以我给了容器流体它的填充回来，一切都恢复正常。

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

Answer 9

要删除所有行上的边距：

.row {
    margin: 0px !important;
}

Answer 10

从 bootstrap 5 开始，添加

.g-0

将取消

.row

的默认边距

换句话说，使用

<div class="row g-0"></div>

创建没有边距的行。

Answer 11

我用过 div 类=“表单控件” 代替 div 类=“行”

这对我来说是固定的。