使用 Flex Box Grid 系统的列之间没有空间

Question

使用Flex Box Grid system。删除两个 50% 宽度列之间的间距的正确方法是什么？

是否有可用的标准类？我在官方网站上找不到。

<div class="container">
    <div class="row">
        <div class="col-md-6">
            col 1
        </div>
        <div class="col-md-6">
            col 2
        </div>
    </div>
</div>

Answer 1

我没有使用过这个网格系统，但是通过检查浏览器开发工具中的元素可以看出，元素之间的空间是使用 padding-right 和 padding-left 属性创建的。您可以尝试为嵌套元素添加另一个类名，并为该类编写覆盖 padding-right 和 padding-left 的规则。

css 看起来像这样。您的选择器应该比 Flex Box Grid System 应用的选择器具有更高的特异性。如果您需要了解特异性，这里有一个很好的指南：https://stuffandnonsense.co.uk/archives/css_specificity_wars.html

.container .row .noPadding {
    padding-right: 0;
    padding-left: 0;
}

html 看起来像这样：

<div class="container">
    <div class="row">
        <div class="noPadding col-md-6">
            col 1
        </div>
        <div class="noPadding col-md-6">
            col 2
        </div>
    </div>
</div>

或者，您可以避免将 Flex Box Grid System 中的类应用于您不希望间隔的两个元素，而只需使用 css 规范的 flex 属性。这是 css flex 的简明指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

两种选择：

1) 如果需要全局移除行列间距（gutters）

您可以直接更改 flexboxgrid.css 中的 :root 变量或在您的自定义 css 文件中覆盖它们。

:root {
    --gutter-compensation: 0; // remove negative margins for row
    --half-gutter-width: 0; // remove padding from columns
}

2) 如果您只需要删除特定部分的间距，您可以使用实用程序类

借用 Bootstrap 的概念，您可以添加一个类，从 .row 中删除负边距并从 .col-* 中删除填充，

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

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

然后添加.no-gutters 类和.row。

<div class="container">
    <div class="row no-gutters">
        <div class="col-md-6">
            col 1
        </div>
        <div class="col-md-6">
            col 2
        </div>
    </div>
</div>

Answer 3

一种方法是在row div 中使用child-no-padding 类：

.child-no-padding>div {
  padding: 0 !important;
}

通过这种方式，您可以防止在子元素中重复 no-padding 类名。

示例：

.child-no-padding>div {
  padding: 0 !important;
}

.col-2{
    background: #00fff5; border: 1px solid #6cccca; text-align:center; font-size:.8em; color:white;
}

<div class="container">
  <div class="row child-no-padding">
    <div class="col-2">
      col 1
    </div>
    <div class="col-2">
      col 2
    </div>
    <div class="col-2">
      col 3
    </div>
    <div class="col-2">
      col 4
    </div>
    <div class="col-2">
      col 5
    </div>
    <div class="col-2">
      col 6
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">