Bootstrap 行类包含 margin-left 和 margin-right 这会产生问题 [英] Bootstrap row class contains margin-left and margin-right which creates problems

问题描述

我正在使用 Bootstrap 'row' 类将 divs 对齐到另一个顶部，这工作正常，但

.row {左边距:-15px；右边距:-15px；}

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

.row-no-margin {左边距:0px；边距右:0px；}

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

解决方案

.row 用于在 container 中使用.由于 container 有填充来调整 .row 中的负边距，所以 .row 内部使用的网格列可以调整到全宽的容器.请参阅 Bootstrap 文档:http://getbootstrap.com/css/#grid

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

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

中

I am using Bootstrap 'row' class to align divs one on top of another, which works fine but

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

What I noticed is that it specifies margin-left and margin-right attributes to be -13px because of which my contents get shifted towards left. so what I have done is added another class as follows :

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

This solves the purpose, but I would still like to know if there is any specific reason for 'margin-left: -15px;'. And what is the best approach to solve my problem.

解决方案

The .row is meant to be used inside a container. Since the container has padding to adjust the negative margin in the .row, grid columns used inside the .row can then adjust to the full width of the container. See the Bootstrap docs: http://getbootstrap.com/css/#grid

Here's an example to illustrate: https://codeply.com/p/zHFaC7JR5K

So, a better solution may for you to place your .row inside a .container or .container-fluid

这篇关于Bootstrap 行类包含 margin-left 和 margin-right 这会产生问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！