css 等高列仅在桌面上有效

ffx8fchx  于 2023-01-03  发布在  其他
关注(0)|答案(1)|浏览(156)

我有代码在我的bootstrap 5网站像这样

<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>

它的工作很好,输出像这样在桌面:

但在移动的没有相同的高度,它看起来像:

基本上我想在移动的设备的图像相同的高度列太多,但它不工作。我使用bootstrap 5.2
我在codeplay中添加了文本代码。
如果这里有人能帮我解决这个难题,请告诉我。谢谢!

py49o6xq

py49o6xq1#

.col-md-6 img {height: 100%;}
.col-md-6 { text-align: center; height:500px; }

相关问题