我刚刚开始使用引导,不确定如何实现我的目标。
我想让水槽都是平的,就像他们在这个形象:
默认情况下,它们看起来像这样,柱之间的垂直沟槽(用蓝色标记)是水平和外部沟槽的两倍:
解决方法
尝试:
.row { margin-left: 0; margin-right: 0; }
每列的两边都有一个15像素的填充。这使得一个30pps之间的沟槽。
在sm网格的情况下,您的容器类将为970px(((940px @ grid-gutter-width)))。
每列的宽度为940/12。由此产生的@ grid-gutter-width / 2在两边
网格将以-15px的负边距隐藏;撤消这个负的左边距在网格的两边设置一个30像素的沟槽。这个沟槽是用15px的填充15px的静止网格空间构建的。
更新
为了回应@ElwoodP的答案,请考虑以下代码:
<div class="container" style="background-color:darkblue;"> <div class="row" style="background-color:yellow;"> <div class="col-md-9" style="background-color:green;"> <div style="background-color:lightblue;">div 1: .col-md-9</div> <div class="row" style="background-color:orange;"> <div class="col-md-6" style="background-color:red;"> <div style="background-color:lightblue;">div 2: .col-md-6</div> </div> <div class="col-md-6" style="background-color:red;"> <div style="background-color:lightblue;">div 2: .col-md-6</div> </div> </div> </div> <div class="col-md-3" style="background-color:green;"> <div style="background-color:lightblue;">div 1: .col-md-3</div> </div> </div> </div>
在嵌套的情况下,操作.row类确实影响子网格。良好或过错取决于您对子网的期望/要求。更改.row的边距不会破坏子网格。
默认:
.row类的边缘
有:
.row { margin-left: 0; margin-right: 0; }
填充容器类
有:
.container { padding-left:30px; padding-right:30px; }
注意子网格不应该包含在.container类中。