Question

我在这里有这段代码，以便它可以并排显示每个图像（从左到右），但是我想制作它，以便在移动版本（最大宽度：480px）中显示图片。 2列（所以2行）。而不是使用@media查询，我想知道如何通过.col-sm完成它？我有 PICTURE PICTURE PICTURE ，我想将其格式在移动显示中更改为：

图片图片

图片

<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会将布局分为两部分。

您可以详细了解here

HTML / CSS / Javascript：如何实现.col-sm可以代替@media查询

1 个答案: