html - 如何显示 flex css 实际工作（引导程序）

Question

我想问一些关于 display flex 的问题

<div class="container mx-auto">
       <div class="d-flex">
           <div class="bg-red-300  w-100 mr-3">halo</div>
           <div class="bg-red-300  w-50 mr-3">halo</div>
       </div>
   </div>

如何显示 flex 可以管理宽度为 100% 和 50% 的宽度 flex 项目？

谢谢 ：）

标签： htmlcsstwitter-bootstrapflexbox

Answer 1

在 BS 中，如果您想拥有 2:1 的元素宽度比，则必须使用网格系统。您上面的代码将变成：

<div class="container mx-auto">
        <div class="row">
            <div class="col-8 bg-red-300 mr-3">halo</div>
            <div class="col-4 bg-red-300 mr-3">halo</div>
        </div>
    </div>