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>
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐