我在第二个列的引导卡中有图像。在台式机上一切看起来都不错,但是当我切换到手机时,我不喜欢它的外观。
<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
有人可以帮我弄这个吗?
为了响应你需要使用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>
@johannes Glad我可以为您提供帮助。如果您认为有帮助,请投票并接受我的回答。快乐的编码:)