如果我使用引导行作为其子div的flex容器，而不是使用列，可以吗？

Question

我是web开发新手，一直在我的个人项目中使用BootstrapV4。根据Bootstrap文档中提到的网格系统，一行中包含列。我注意到，引导行在默认情况下是flex容器，我在一行中放置的任何div的行为都类似于flex元素。因此，它们收缩到它们内部的内容。

但是，如果我将col类应用于行中的那些div，那么col div现在将填充整行，并且不会缩小到其中内容的大小。因此，我有时更喜欢在没有col类的行中使用子div。此外，我还可以直接应用资源中心对齐和项目中心与行div对齐。

因此，与其这样做，

<div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
</div>

我更喜欢做，

<div class="container">
    <div class="row justify-content-center align-items-center">
          <div>A</div>
          <div>B</div>
          <div>C</div>
      </div>
</div>

直接使用行作为灵活容器是一个好的习惯，还是必须在其中放置列？

我发现很难将内容集中在一个专栏中，因为我最终把它变成了一个flex容器。

Answer 1

理论上，您几乎可以使用任何东西作为flex容器，但是。Bootstrap中的行s被专门配置为flex容器，具有负边距，与相匹配。col-*类。因此，我建议您坚持使用此。行和。col-*组合。

如果您想自己构建一个flex容器，可以使用一些引导内置类，例如，d-flex，将元素快速转换为flexbox。

如果元素的父元素中有以下内容，则可以将其垂直和水平居中：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

同样，也有一些内置的引导类：

<div class="row">
    <div class="col d-flex justify-content-center align-items-center">
        <p>Your Content</p>
    </div>
</div>

我不确定你是否认为这足够快...