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文档:http://getbootstrap.com/css/#grid

因此,一个更好的解决方案可能是你放置你的.row内部.container或.container-fluid

或者只使用`.clearfix`而不是`.row`.它做同样的事情,但两边都没有边距. (8认同)
请注意,虽然clearfix最初似乎起作用,但它[不适用于包含网格列](http://getbootstrap.com/css/#grid),并且会导致[不正确的间距](http://www.codeply. COM /走/ sV2tneJWKv).此外,容器具有响应性并且可以具有不同的宽度. (4认同)
这就是我要找的东西.谢谢! (3认同)
将我的内容包装在“.container-fluid”内，谢谢:) (2认同)

Answer 2

您可以使用行流体而不是行,那么您将不会遇到此问题.(对于以前版本的bootstrap)

我不确定最近的版本3,无论如何:

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

`row-fluid`在最新版本中使用较长.. [Bootstrap 3](http://bootply.com/bootstrap-3-migration-guide) (4认同)
关于第一列和最后一列的点数+1 (3认同)