带有 Bootstrap 5 和纵横比的 Flexbox答案

【问题标题】：Flexbox with Bootstrap 5 and Aspect Ratio带有 Bootstrap 5 和纵横比的 Flexbox
【发布时间】：2021-10-19 00:59:29
【问题描述】：

以下代码使用 bootstrap 和 flexbox 创建了一个两列布局，其中左列显示视频描述，右列显示嵌入视频。

<div class="d-flex flex-row flex-wrap">
    <div class="col-md-5 col-12 pe-md-2 order-md-first order-last">
    placeholder
    </div>
    <div class="col-md-7 col-12 ps-md-2 ratio ratio-16x9">
        <iframe width="100%" src="https://www.youtube.com/embed/WUgvvPRH7Oc?controls=0" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

但是，正确的纵横比打破了 flexbox 设置的界限。我错过了什么？

【问题讨论】：

标签： html css twitter-bootstrap flexbox bootstrap-5

【解决方案1】：

按照Bootstrap docs中的指导...

“在构建网格布局时，所有内容都放在列中。Bootstrap 网格的层次结构从容器到行到列再到您的内容。在极少数情况下，您可以将内容和列结合起来，但是请注意可能会产生意想不到的后果。”

因此你需要一个纵横比inside列...

<div class="d-flex flex-row flex-wrap">
    <div class="col-md-5 col-12 pe-md-2 order-md-first order-last">
    placeholder
    </div>
    <div class="col-md-7 col-12 ps-md-2">
        <div class="ratio ratio-16x9">
           <iframe width="100%" src="https://www.youtube.com/embed/WUgvvPRH7Oc?controls=0" frameborder="0" allowfullscreen></iframe>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

.ratio 类将宽度设置为 100%，因此它会干扰 .col% 系列的类。您可以在 .col 下嵌套 ratio 类：

<div class="container">
  <div class="row">
    <div class="col-5 order-md-first order-last">
      placeholder
    </div>
    <div class="col-7" <div class="ratio ratio-16x9">
      <iframe width="100%" src="https://www.youtube.com/embed/WUgvvPRH7Oc?controls=0" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>
</div>

【讨论】：