在 .d-flex 容器引导程序 4 中使用 .col-*

Question

是否（允许）推荐在 .d-flex 容器中将 .col-* 用作子级？还是不是应该使用.d-flex，而是使用.row？

---

在Bootstrap 4 Docs 中，我找不到任何在.d-flex 容器中使用.col-* 的示例。他们只使用这样的布局

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

但是这些 .p-2 类不会使这些列响应。他们只定义了padding，没有给出width。

例如，我想要这样的东西：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="d-flex flex-wrap">
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
  <div class="col-sm-3 col-12">
    Responsive cols
  </div>
</div>

根据 Bootstrap 是好还是坏的做法？我找不到与 .d-flex 和 .col-* 组合相关的任何内容。

Answer 1

我找不到任何在 .d-flex 中使用 .col-* 的示例 容器。

这应该是您第一次表明是的，您应该依赖.row。 d-flex 类应用以下 CSS：

.d-flex {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
}

就是这样。同时.row 与.container（或.container-fluid)）交互。它还提供额外的边距设置，以便您嵌套的.col-*-* 项目正确定位。

d-flex 类是 Bootstrap 4s “实用程序”类的一部分；这些类旨在为您的布局和结构提供额外的灵活性；不要替换像 Grid 这样更强大的组件。

Answer 2

按照文档的解释...

"行是列的包装。每列都有水平填充 （称为排水沟）用于控制它们之间的空间。这个填充 然后在具有负边距的行上抵消。这样一来，所有 列中的内容在视觉上是左对齐的。”

因此，col-* 应该是直接子代.row。 .row 和 col-* 也被设计成一个网格。这允许columns to wrap 根据需要进入下一行。由于flex-wrap，包装在您的示例中有效。

所以，col-* 应该在 row 而不是 d-flex 中的两个原因：

• 左/右对齐容器内容
• 根据网格宽度换行

比较 col-* 内 row 与 d-flex: https://www.codeply.com/go/82ecXXvpkO