html - 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 有填充以调整 .row 中的负边距，因此 .row 中使用的网格列可以调整为全宽的容器。参见 the Bootstrap docs .

Here's an example to illustrate

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

中