Question

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

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

在手机和Dekstop上观看时，图像如下所示： https://imgur.com/a/9afhvil

有人可以帮我吗？

Answer 1

自举4已更改。让我们将类col更改为col-md-6以在桌面上显示2列。 col-sm-6显示Tablet上的2列，或col-sm-12显示站点上的1列。然后将col-12放在手机上显示完整宽度尺寸。

Answer 2

要进行响应，您需要使用col-sm，col-md，col-lg，col-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>

Answer 3

在bs4中，如果仅使用col类，则这些类将始终彼此相邻。您需要定义希望列具有哪种尺寸的屏幕尺寸。

<div class="mt-5 container card w-100">
    <div class="row">
        <div class="col-12 col-md-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-12 col-md-6">
            <img class="img-fluid img-responsive" src="trees.jpg">
        </div>
    </div>
</div>

这里我只更改了列数，我说在最小的屏幕上，列应占据所有12个空格。在md（中）尺寸（及更高尺寸）上，它仅应占据屏幕的50％。

关于the grid system of bs4的文档，也许您需要除col-md-6以外的其他断点。也许您也对col-sm-6感到满意。从这些答案中脱颖而出的重要事情是如何使用bootstrap设置网格，因为这就是使用bootstrap的全部目的。

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

3 个答案: