HTML/CSS/Javascript:我该怎么做.col-sm可以取代@media-query

Question

我这里有这个代码，这样它就可以并排(从左到右(显示每个图像，但我想让它在移动版本(最大宽度：480px(中显示两列(所以是两行(的图片。我不想使用@media查询，而是想知道如何通过.colsm进行查询？我有图片图片，我想将其在移动显示器中的格式更改为：

图片图片

图片

<div class="col-9">
<div class="card-group">
<div class="card">
<img class="card-img-top" src="carrots.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="beets.jpg" alt="Card image cap">
</div>
<div class="card">
<img class="card-img-top" src="asparagus.jpg" alt="Card image cap">
</div>
</div>

如果问题很含糊，我深表歉意。我还是个新手，正在学习引导

Answer 1

您需要给容器元素一个container-fluid类，然后相应地给它的子元素一个col-xs-类。例如：

<div class="container-fluid">
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
<div class="col-md-4 col-xs-6">
<img>
</div>
</div>

container-fluid类将使您的页面具有响应性。当视口宽度为992px或更宽时，col-md-4会将12列布局拆分为三个大小相等的部分。col-xs-6将把布局分成两部分。

你可以在这里阅读更多关于