从Bootstrap 4的网格列中删除填充装订线

本文介绍了从Bootstrap 4的网格列中删除填充装订线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在Bootstrap 4中创建无檐槽网格?

How do you create a gutterless grid in bootstrap 4?

是否有用于清除排水沟的官方API?是手动的吗?

Is there an official API for removing the gutter or is it manual?

推荐答案

Bootstrap4:开箱即用.no-gutters.来源: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap4:Comes with .no-gutters out of the box.source: https://github.com/twbs/bootstrap/pull/21211/files

Bootstrap3:

需要自定义CSS.

样式表:

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

然后使用:

<div class="row no-gutters">
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
  <div class="col-xs-4">...</div>
</div>

它将:

从行中删除页边距
从该行正下方的所有列中删除填充

这篇关于从Bootstrap 4的网格列中删除填充装订线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！