bootstrap取消15px边距沟槽的方法
bootstrap取消15px边距沟槽的方法在利用bootstrap栅格布局时,container容器下的col如果有多个,他们之间分别有15px的左右内边距。这是bootstrap插件在底层封装时为了不出现内容紧接边框造成的不美观,所以设置了15px的内边距。在开开发中我们有时并不需要它存在内边距,这个时候改怎么办呢?bootsrap3的方法在我们预定义的网格类中,列之间的沟槽可以用删除。没有沟
·
bootstrap取消15px边距沟槽的方法
在利用bootstrap栅格布局时,container容器下的col如果有多个,他们之间分别有15px的左右内边距。这是bootstrap插件在底层封装时为了不出现内容紧接边框造成的不美观,所以设置了15px的内边距。在开开发中我们有时并不需要它存在内边距,这个时候改怎么办呢?
bootsrap3的方法
在我们预定义的网格类中,列之间的沟槽可以用删除。没有沟槽。这将删除.row的负边距和所有直接子列的水平填充。
下面是创建这些样式的源代码。请注意,列重写的作用域仅限于第一个子列,并通过属性选择器作为目标。
.row {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
bootsrap4的方法
在bootsrap4中其中给我们封装了no-gutters,方便我们取消内边距,只需加上no-gutters类就能实现效果,例如:
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
更多推荐
已为社区贡献1条内容
所有评论(0)