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

Posted 2023-03-06

【中文标题】在 .d-flex 容器引导程序 4 中使用 .col-*

【英文标题】：Using .col-* in .d-flex container bootstrap 4

【发布时间】：2018-09-29 17:22:46

【问题描述】：

是否（允许）推荐在 .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-* 组合相关的任何内容。

【参考方案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 这样更强大的组件。

【讨论】：

是的，我明白不要用.row 替换.d-flex。但是如果我不想在某些情况下使用.row 类怎么办？我可以使用.col-* 和.d-flex？

@Red - 列仍将遵循它们的断点声明，但正如我上面提到的，您将失去容器和行类提供的所有边距和定位。鉴于.row 已经 flex，我很难找到避免使用它的任何理由。此外，col-xs-* 在 Bootstrap 4 中不存在。

【参考方案2】：

按照文档的解释...

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

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

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

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

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

【讨论】：

如果使用网格，请使用.row。如果我想在不使用网格的组件中获得额外的响应能力，我可以使用.d-flex 和.flex-wrap。我现在很清楚应该在哪里使用两者。谢谢。