twitter-bootstrap - 在 .d-flex 容器 Bootstrap 中使用 .col-* 4

Question

是否(允许)推荐使用 .col-* 作为 .d-flex 容器中的子级？还是不是应该使用 .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

如文档所述...

"Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side."

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

因此，col-* 应该在 row 而不是 d-flex 中的 2 个原因:

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

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