bootstrap取消15px边距沟槽的方法

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>