温馨提示:本文翻译自stackoverflow.com,查看原文请点击:html - Image in bootstrap card not on the right place when on phone
bootstrap-4 css html

html - 开机时引导卡中的图像不在正确的位置

发布于 2020-03-27 11:31:27

我在第二个列的引导卡中有图像。在台式机上一切看起来都不错,但是当我切换到手机时,我不喜欢它的外观。

<div class="mt-5 container card w-100">
    <div class="row">
        <div class="col">
            <div class="card-body">
                <h4 class="card-title">Card-title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="card-link">Card link</a>
            </div>
        </div>
        <div class="col">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>

在电话和桌面上查看时,图像看起来像这样:https ://imgur.com/a/9afhvil

有人可以帮我弄这个吗?

查看更多

查看更多

提问者
johannes
被浏览
159
Sai Manoj 2019-07-03 22:55

为了响应你需要使用col-smcol-mdcol-lgcol-xl您可以通过w3schools引用Bootstrap网格

<div class="mt-5 container card w-100">
    <div class="row">
        <div class="col-sm-6">
            <div class="card-body">
                <h4 class="card-title">Card-title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="card-link">Card link</a>
            </div>
        </div>
        <div class="col-sm-6">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>