如何用Bootstrap实现三个等高的新闻展示列？

嘿，我完全懂你遇到的困扰——从两列切换到三列布局后，等高列突然失效确实挺闹心的。咱们来一步步搞定它：

首先，先纠正一个基础布局的小问题：你现在用的col-md-6是两列等宽的类（Bootstrap 12列网格里，12/6=2），要实现三列等宽，得把它换成col-md-4（12/4=3），这是布局的前提。

接下来解决等高的问题，Bootstrap 4本身基于Flexbox，咱们可以利用它的原生类轻松实现卡片等高，甚至让内容布局更规整：

修改后的代码示例 #

<!-- Latest news -->
<div class="section">
    <h2 class="my-5">Nos dernières actualités</h2>
    <div class="row"> {# Bootstrap原生row默认是flex容器，自带flex布局属性 #}
        {% for new in news %} 
            <div class="col-md-4"> {# 三列等宽替换col-md-6为col-md-4 #}
                <div class="media my-3 shadow-sm p-3 mb-5 bg-white rounded h-100"> {# h-100让卡片占满父列高度 #}
                    <img alt="" class="float-left mr-3" style="width: 2em;" src="{{ path('home')}}img/news/{{ new.image }} ">
                    <div class="media-body d-flex flex-column"> {# 垂直flex布局，方便控制元素位置 #}
                        <h5 class="mt-0">{{ new.title }}</h5>
                        <p class="flex-grow-1">{{ new.title }}</p> {# 填充剩余空间，保证内容区域高度一致 #}
                        <a href="" class="float-right mt-auto">Lire plus...</a> {# 自动推到卡片底部 #}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

关键修改点说明 #

• col-md-4替换col-md-6：适配三列等宽的网格布局，这是基础调整。
• h-100类给.media容器：强制卡片容器占满所在列的全部高度，确保所有卡片的基础高度一致。
• d-flex flex-column给.media-body：把媒体内容区域改成垂直方向的flex布局，这样我们可以灵活控制内部元素的位置。
• flex-grow-1给段落：让段落区域自动填充卡片的剩余空间，不管内容多少，都会撑开高度，保证所有卡片的内容区域高度统一。
• mt-auto给链接：自动将“Lire plus...”链接推到卡片的底部，让所有卡片的底部元素对齐，视觉上更整齐。

如果之前的row-flex是你自定义的类，建议直接用Bootstrap原生的row就好，它已经包含了display: flex;和flex-wrap: wrap;等必要属性，不会和原生布局冲突。

另外，检查一下有没有自定义CSS给列或者卡片设置了float、fixed-height这类属性，它们可能会干扰Flexbox的等高效果哦~

内容的提问来源于stack exchange，提问作者Gaz-mên Arifi