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

发布时间：2020-12-18 00:19:04 所属栏目：安全来源：网络整理

导读：我不知道如果是正确的方法,但如何删除列之间的30px沟槽？但没有边距左：-30px设置. div class='container'div class='row'div class='col-lg-1'/divdiv class='col-lg-1'/divdiv class='col-lg-1'/div/div/div 解决方法删除列上的填充的更好方法是将.no-pad

我不知道如果是正确的方法,但如何删除列之间的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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!