Question

是否（允许）建议将https://play.google.com/store/apps/details?id=com.example.application &referrer=utm_source%3Dgoogle %26utm_medium%3Dcpc %26utm_term%3Drunning%252Bshoes %26utm_content%3Dlogolink %26utm_campaign%3Dspring_sale用作.col-*容器中的子项？或者不是.d-flex应该使用的方式，而是使用.d-flex？

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

.d-flex

但是这些<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。

所以我想要这样的东西：

＆＃13;

width

＆＃13;

根据Bootstrap是好还是坏？我无法找到与<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-xs-12"> Responsive cols </div> <div class="col-sm-3 col-xs-12"> Responsive cols </div> <div class="col-sm-3 col-xs-12"> Responsive cols </div> <div class="col-sm-3 col-xs-12"> Responsive cols </div> </div>和.d-flex相关的任何内容。

Answer 1

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

这应该是你的第一个迹象，是的，你应该依赖.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“Utility”类的一部分;这些课程旨在为您的布局和结构提供额外的灵活性;不要替换像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

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

2 个答案: