Bootstrap 5等高列仅桌面端生效，移动端高度不一致求助

问题描述 #

使用以下Bootstrap 5.2代码构建的布局，桌面端显示正常（图片与右侧内容列高度匹配），但移动端下图片列和内容列高度不一致：

<div class="row mt-3">
    <div class="col-md-6 mt-3 mt-md-0">
        <a href="post/good-morning-status-shayari-68346" class="h-100"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img lzy_img" alt="Good Morning Status Shayari" width="100%" height="100%">
        </a>
    </div>
    <div class="col-md-6 mt-3 mt-md-0">
        <div class="bg-dark text-white blog_content d-flex flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
            <h5>સપનાઓ ચા જેવા કડક હોવા </h5>
            <div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0">
                <div class="">
                    <p class="">સપનાઓ ચા જેવા<br> કડક હોવા જોઈએ સાહેબ,<br> જે રાતની ઊંઘ છીનવી લે !!<br> 💐🌷🌹શુભ સવાર🌹🌷💐</p>
                </div>
            </div>
            <div class="time d-flex justify-content-between align-items-center align-items-end mt-auto border-top pt-3">
                <div class="left text-start">
                    <h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/category/gujarati-good-morning-status-shayari">શુભ સવાર સ્ટેટસ શાયરી</a></h6>
                    <p class="mb-0"><small>6 days ago</small></p>
                </div>
                <div class="right">
                </div>
            </div>
        </div>
    </div>
</div>

问题原因 #

移动端下两列堆叠排列时，内容列的mx-3左右外边距导致其宽度比图片列窄，同时图片的height="100%"在堆叠后缺乏明确的父级高度参照，加上内容列的内边距组合影响，最终造成高度不匹配。

修复方案 #

修改后的代码如下：

<div class="row mt-3">
    <div class="col-md-6 mt-3 mt-md-0 px-3">
        <a href="post/good-morning-status-shayari-68346" class="h-100 d-block">
            <img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img lzy_img" alt="Good Morning Status Shayari" width="100%" height="100%">
        </a>
    </div>
    <div class="col-md-6 mt-3 mt-md-0 px-3">
        <div class="bg-dark text-white blog_content d-flex flex-column bg-black h-100 text-center pt-3 pb-3 px-3">
            <h5>સપનાઓ ચા જેવા કડક હોવા </h5>
            <div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0">
                <div class="">
                    <p class="">સપનાઓ ચા જેવા<br> કડક હોવા જોઈએ સાહેબ,<br> જે રાતની ઊંઘ છીનવી લે !!<br> 💐🌷🌹શુભ સવાર🌹🌷💐</p>
                </div>
            </div>
            <div class="time d-flex justify-content-between align-items-center align-items-end mt-auto border-top pt-3">
                <div class="left text-start">
                    <h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/category/gujarati-good-morning-status-shayari">શુભ સવાર સ્ટેટસ શાયરી</a></h6>
                    <p class="mb-0"><small>6 days ago</small></p>
                </div>
                <div class="right">
                </div>
            </div>
        </div>
    </div>
</div>

关键改动说明 #

• 给两个col-md-6都添加px-3，移除内容容器的mx-3，确保移动端堆叠时两列宽度完全一致
• 给图片所在的<a>标签添加d-block类，消除行内元素的默认间距，保证图片容器正确占满列宽
• 内容容器保留px-3内边距，维持原有视觉效果的同时，避免外边距导致的宽度差异
• 确保h-100类在移动端依然生效，让内容容器始终占满父列的高度，实现和图片列的高度匹配

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