68

How do you create a gutterless grid in bootstrap 4?

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

4

5 回答 5

108

Bootstrap5： 附带装订线实用程序

  • 所有视口g-0..g-5
  • 响应式视口g-sm-0..g-lg-5
  • 水平/垂直gy-0..gx-5

具有零装订线宽度的示例：

<div class="container">
  <div class="row g-0">
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">...</div>
    </div>
  </div>
</div>

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

引导程序3：

需要自定义 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>

它会：

  • 从行中删除边距
  • 从行正下方的所有列中删除填充
于 2016-04-04T21:59:57.347 回答
15

您应该使用内置的 bootstrap4 间距类来自定义元素的间距，这是更方便的方法。

于 2018-05-04T06:20:30.863 回答
12

需要边缘到边缘的设计？删除父级.container或.container-fluid.

尽管如此，如果您需要从.row子列和直接子列中删除填充，则必须.no-gutters使用上面@Brian 中的代码将类添加到您自己的 CSS 文件中，实际上它不是“开箱即用”，请在此处查看最终的官方详细信息Bootstrap 4 版本：https ://getbootstrap.com/docs/4.0/layout/grid/#no-gutters

于 2018-01-23T07:30:43.323 回答
3

您可以使用此 css 代码在引导程序中获得无间隙网格。

.no-gutter.row,
.no-gutter.container,
.no-gutter.container-fluid{
  margin-left: 0;
  margin-right: 0;
}

.no-gutter>[class^="col-"]{
  padding-left: 0;
  padding-right: 0;
}
于 2016-04-04T22:11:13.650 回答
2

您可以使用 mixinmake-col-ready并将装订线宽度设置为零：

@include make-col-ready(0);

于 2016-12-12T10:36:58.920 回答