Html Bootstrap 行类包含 margin-left 和 margin-right 这会产生问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23153497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap row class contains margin-left and margin-right which creates problems
提问by Tarun Gupta
I am using Bootstrap 'row' class to align divsone on top of another, which works fine but
我正在使用 Bootstrap ' row' 类将divs一个与另一个对齐，这工作正常，但
.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;'. 什么是解决我的问题的最佳方法。
回答by Zim
The .rowis meant to be used inside a container. Since the containerhas padding to adjust the negative margin in the .row, grid columns used inside the .rowcan then adjust to the full width of the container. See the Bootstrap docs: http://getbootstrap.com/css/#grid
将.row意味着内部使用container。由于container具有填充来调整 中的负边距，因此.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 .rowinside a .containeror .container-fluid
因此，更好的解决方案可能会让您将您的.row内部.container或.container-fluid
回答by 4dgaurav
You can use row-fluid instead of row, then you won't have this problem. (for previous versions of bootstrap)
你可以用row-fluid代替row，这样就不会有这个问题了。（对于以前版本的引导程序）
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?
回答by JesseEarley
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 的填充，而行上的这个负边距会将内容拉回到容器的边缘。
回答by ShhTot
Old topic, but I was recently affected by this.
老话题，但我最近受此影响。
Using a class "row-fluid" instead of "row" worked fine for me but I'm not sure if it's fully supported going forward.
使用“row-fluid”类而不是“row”类对我来说效果很好，但我不确定它是否得到完全支持。
So after reading Why does the bootstrap .row has a default margin-left of -30pxI just used the <div>(without any row class) and it behaved exactly like <div class="row-fluid">
因此，在阅读为什么引导程序 .row 的默认边距左侧为 -30px 后，我只使用了<div>（没有任何行类），它的行为与<div class="row-fluid">
回答by Franck Wolff
Old topic, but I think I found another descent solution. Adding class="row"to a div will result in this CSS configuration:
老话题，但我想我找到了另一个下降解决方案。添加class="row"到 div 将导致此 CSS 配置：
.row {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
We want to keep the first 3 rules and we can do this with class="d-flex flex-wrap"(see https://getbootstrap.com/docs/4.1/utilities/flex/):
我们想保留前 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;
}
It adds !important rules though but it shouldn't be a problem in most cases...
它添加了 !important 规则，但在大多数情况下应该不是问题......
回答by Junaid
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.
我遇到了同样的问题，最初，我删除了行的左右 -ve 边距并删除了水平滚动条，但效果不佳。然后经过 45 分钟的检查和搜索，我发现我使用的是 container-fluid 并且正在移除填充物，并且它的内行有左右负边距。所以我给了容器流体它填充回来，一切都恢复正常。
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
如果您确实需要删除容器流体填充，请不要只删除项目中每一行的左右负边距，而是引入一个类并在所需的容器上使用它
回答by Vkl125
I used div class="form-control" instead of div class="row"
我使用 div class="form-control" 而不是 div class="row"
That fixed for me.
这对我来说是固定的。
