如何在Bootstrap中为column方向的Flex容器设置flex-basis？

Bootstrap提供了现成的Flex布局工具类，可以快速实现你要的效果，具体实现方式如下：

核心思路 #

1. 用Bootstrap的工具类搭建垂直Flex容器：d-flex开启Flex布局，flex-column设置垂直排列（对应原生CSS的flex-direction: column）
2. 容器固定100px高度，直接用内联样式指定（Bootstrap的百分比高度类基于父元素，固定像素值用内联样式更直接）
3. 由于Bootstrap默认没有70%、30%这类非标准百分比的flex-basis工具类，可通过内联样式或自定义类实现子元素的比例分配

代码示例 #

方式一：内联样式快速实现

<div class="d-flex flex-column" style="height: 100px;">
    <div style="flex-basis: 70%;">box</div>
    <div style="flex-basis: 30%;">box</div>
</div>

方式二：自定义类复用实现

如果需要多次复用该比例，可自定义CSS类配合Bootstrap容器类使用：

<style>
    .flex-basis-70 { flex-basis: 70%; }
    .flex-basis-30 { flex-basis: 30%; }
</style>

<div class="d-flex flex-column" style="height: 100px;">
    <div class="flex-basis-70">box</div>
    <div class="flex-basis-30">box</div>
</div>

补充说明 #

• 若不需要固定100px高度，而是让容器占满父级高度，可替换内联样式为Bootstrap的h-100类
• 若要确保子元素严格遵循flex-basis比例、不自动伸缩，可额外添加flex-grow-0 flex-shrink-0类

内容的提问来源于stack exchange，提问作者Daniel