我不知道如果是正确的方法,但如何删除列之间的30px沟槽?但没有边距左:-30px设置.
<div class='container'> <div class='row'> <div class='col-lg-1'></div> <div class='col-lg-1'></div> <div class='col-lg-1'></div> </div> </div>
解决方法
删除列上的填充的更好方法是将.no-pad类添加到.row中:
<div class="row no-pad">
…然后添加这个CSS.
.row.no-pad { margin-right:0; margin-left:0; } .row.no-pad > [class*='col-'] { padding-right:0; padding-left:0; }
寻找第一个和最后一个孩子的项目是一个坏主意,因为.row的意图是在视口右侧和左侧照顾这些偏移量.使用上述方法,所有.col- *都保持相同的风格,当考虑响应性时,尤其是在移动尺寸上堆叠(尝试我的演示下面的md大小)也是简单得多.
直接后裔CSS选择器>意味着.no-pad只适用于.row的直接子代.cols,所以如果你愿意的话,你可以在随后的嵌套列结构中填充(或不填).