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

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

我正在使用Bootstrap'row'类来将div一个在另一个上面，这可以正常工作但是

.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 :

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

.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.

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

5 个解决方案

#1

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

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

Here's an example to illustrate: http://bootply.com/131054

这是一个例子来说明：http：//bootply.com/131054

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

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

#2

You can use row-fluid instead of row, then you won't have this problem. (for previous versions of bootstrap)

你可以使用row-fluid而不是row，那么你就不会遇到这个问题。（对于以前版本的bootstrap）

I am not sure of recent versions 3, any way :

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

The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.

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

For more information on this Why does the bootstrap .row has a default margin-left of -30px?

有关这方面的更多信息为什么bootstrap .row的默认边距为-30px？

#3

Are you using Bootstrap 3? My version of the css has -15px, not -13px. In any case, I've simply done what you've down, and overwritten the style. I believe it's because the .container class has a 15px padding on the left and right, and this negative margin on the rows will pull that content back out to the edge of the container.

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

#4

I was facing this same issue and initially, I removed the row's right and left -ve margin and it removed the horizontal scroll, but it wasn't good. Then after 45 minutes of inspecting and searching, I found out that I was using container-fluid and was removing the padding and its inner row had left and right negative margins. So I gave container-fluid it's padding back and everything went back to normal.

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

If you do need to remove container-fluid padding, don't just remove every row's left and right negative margin in your project instead introduce a class and use that on your desired container

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

#5

-2

I used div class="form-control" instead of div class="row"

我使用div class =“form-control”而不是div class =“row”

That fixed for me.

这对我来说很有用。

#1