2.4.2 无边距类

使用.no-gutters可以去掉.row元素的左/右外边距和.row下的.col列元素的左/右内边距。其定义如下。

.no-gutters{
  margin-right:0;
  margin-left:0;
>.col,
>[class*=＂col-＂]{
  padding-right:0;
  padding-left:0;
  }
}

【实例2-12】（文件 guttergrid.html）

<div class=＂container＂>
    <div class=＂row no-gutters＂>
        <div class=＂col-12 col-sm-6 col-md-8＂>.col-12 .col-sm-6 .col-md-8</div>
        <div class=＂col-6 col-md-4＂>.col-6 .col-md-4</div>
    </div>
    <div class=＂row＂>
        <div class=＂col-12 col-sm-6 col-md-8＂>.col-12 .col-sm-6 .col-md-8</div>
        <div class=＂col-6 col-md-4＂>.col-6 .col-md-4</div>
    </div>
</div>

以上代码在Chrome浏览器中的运行效果如图2-18所示。

图2-18 去掉 row外边距、col的内边距

说明：第1行，去掉了.row的左/右外边距-15px，去掉行中列的内边距15px。