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

Question

是否（允许）建议将.col-*'s 用作.d-flex容器中的子项？或者不是.d-flex应该使用的方式而是使用.row？

---

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

<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给出。

所以例如我想要这样的东西：

<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>

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

Answer 1

正如文档所解释的那样......

“行是列的包装器。每列都有水平填充（称为装订线），用于控制它们之间的空间。然后在具有负边距的行上抵消这种填充。这样，列中的所有内容都在视觉上向下对齐左边。”

因此，col-*应该是直系子孙.row。并且.row和col-*一起设计为网格。这允许列根据需要换行到下一行。包装在您的示例中有效，因为flex-wrap.

因此，col-*应该有两个原因row而不是d-flex：

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

比较col-*里面rowVS d-flex：https://www.codeply.com/go/82ecXXvpkO

Answer 2

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

这应该是你的第一个迹象，是的，你应该依赖.row. 本d-flex类应用下面的CSS：

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

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

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