时间戳

首页 > 解决方案 > 如果我使用 Bootstrap 行作为其子 div 的 flex 容器而不是使用列，是否可以？

html - 如果我使用 Bootstrap 行作为其子 div 的 flex 容器而不是使用列，是否可以？

问题描述

我是 Web 开发的新手，并且一直在我的个人项目中使用 Bootstrap v4。根据 Bootstrap 文档中提到的网格系统，行中包含列。我注意到默认情况下，Bootstrap 行是 flex 容器，而我放在一行中的任何 div 都表现得像 flex 元素。所以他们缩小到里面的内容。

但是，如果我将 col 类应用于行内的那些 div，col div 现在会填满整行，并且不会缩小到其中内容的大小。因此，我有时更喜欢在没有 col 类的情况下连续使用子 div。我也可以直接将 justify-content-center 和 align-items-center 应用于行 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 容器。

标签： htmlbootstrap-4

解决方案

理论上，您几乎可以将任何东西用作弹性容器，但.rowBootstrap 中的 s 被专门配置为具有负边距的弹性容器，与.col-*类配合得很好。因此，我建议你坚持这个.row和.col-*组合。

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

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

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

同样，这些也有 Bootstrap 内置类：

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

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

推荐阅读