Bootstrap动态展示flex项无法换行的问题咨询

问题说明 #

需要动态展示Flex布局的卡片，每个卡片占屏幕宽度的1/2，要求每两个卡片后自动换行。但用d-flex flex-row没法实现这个效果，现有代码如下：

<div class="d-flex mb-3">
    <div class="card col-6 m-3">
        <p>Card 1</p>
    </div>
    <div class="card col-6 m-3">
        <p>Card 2</p>                
    </div>
    <div class="d-flex flex-row"></div>
    <div class="card col-6 m-3">
        <p>Card 3</p>                
    </div>
    <div class="card col-6 m-3">
        <p>Card 4</p>                
    </div>
</div>

三种可行解决方法 #

方法一：Flex容器加自动换行（推荐） #

给外层Flex容器加flex-wrap类，同时调整卡片宽度抵消margin的影响（因为m-3会占用额外宽度，直接用col-6会超出容器）。

修改后代码：

<div class="d-flex flex-wrap mb-3">
    <div class="card flex-basis-[calc(50%-1rem)] m-3">
        <p>Card 1</p>
    </div>
    <div class="card flex-basis-[calc(50%-1rem)] m-3">
        <p>Card 2</p>                
    </div>
    <div class="card flex-basis-[calc(50%-1rem)] m-3">
        <p>Card 3</p>                
    </div>
    <div class="card flex-basis-[calc(50%-1rem)] m-3">
        <p>Card 4</p>                
    </div>
</div>

• flex-wrap让容器在子项总宽度超出时自动换行
• flex-basis-[calc(50%-1rem)]是自定义工具类，计算逻辑：每个卡片占50%宽度，减去左右m-3的总宽度，确保两个卡片加margin刚好填满一行

方法二：改用Bootstrap网格系统（更省心） #

直接用Bootstrap的网格布局，自带换行逻辑，不用手动处理Flex换行：

<div class="row gx-3 gy-3 mb-3">
    <div class="col-6">
        <div class="card w-100">
            <p>Card 1</p>
        </div>
    </div>
    <div class="col-6">
        <div class="card w-100">
            <p>Card 2</p>                
        </div>
    </div>
    <div class="col-6">
        <div class="card w-100">
            <p>Card 3</p>                
        </div>
    </div>
    <div class="col-6">
        <div class="card w-100">
            <p>Card 4</p>                
        </div>
    </div>
</div>

• row是网格容器，自带Flex布局且自动换行
• gx-3/gy-3控制列之间的水平/垂直间距，替代m-3避免margin冲突
• col-6让每个列占1/2宽度，自动换行；card w-100让卡片填满列宽

方法三：强制换行元素（适配原有逻辑） #

如果想保留原有结构，用一个占满整行的空元素触发换行，外层必须加flex-wrap：

<div class="d-flex flex-wrap mb-3">
    <div class="card col-6 m-3">
        <p>Card 1</p>
    </div>
    <div class="card col-6 m-3">
        <p>Card 2</p>                
    </div>
    <div class="w-100"></div> <!-- 这个元素占满整行，触发换行 -->
    <div class="card col-6 m-3">
        <p>Card 3</p>                
    </div>
    <div class="card col-6 m-3">
        <p>Card 4</p>                
    </div>
</div>

• w-100让空元素占满容器宽度，迫使Flex容器换行
• 必须给外层加flex-wrap，否则不会触发换行

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