twitter-bootstrap-3 – 如何在引导3列之间删除沟槽

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap-3 – 如何在引导3列之间删除沟槽前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我不知道如果是正确的方法,但如何删除列之间的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,所以如果你愿意的话,你可以在随后的嵌套列结构中填充(或不填).

同样使用属性选择器[class * =’col-‘]意味着每一列都不需要添加额外的非Bootstrap类.

这是一个演示:http://www.bootply.com/Ae3xTyAW5D

猜你在找的Bootstrap相关文章