从Bootstrap 4

Question

如何在bootstrap 4中创建一个无沟槽网格？

是否有用于移除装订线的官方API或手动？

Answer 1

<强> Bootstrap4： 开箱即用.no-gutters。 来源：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>

它会：

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

Answer 2

您应该使用built-in bootstrap4 spacing classes来自定义元素的间距，这是更方便的方法。

Answer 3

  

需要边缘到边缘的设计吗？放弃父.container或.container-fluid。

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

Answer 4

你可以使用这个css代码在bootstrap中获得无网格。

.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;
}

Answer 5

您可以使用mixin @include make-col-ready(0);并将装订线宽度设置为零：

mUsername = mKeyboard.nextLine();