html - 调整内容大小而不是移动它

Question

我正在使用 `boostrap 3。我想将 4 张图片放置在 2 张图片的列中，如下所示:

______   ______
 |Image|  |Image|

 ______   _______
 |Image|  |Image|

所以代码看起来像这样:

<div class="row">
    <!--Reglamento-->
    <div class="col-sm-2">
    <a href="Second_web.html">
        <img src="img/test_img.png" width=100%>
        <div class="box_text">
            Reglamento_text
        </div>
    </a>
    </div>

    <!--Armamento-->
    <div class="col-sm-2">
        <a href="Second_web.html">
            <img src="img/test_img.png" width=100%>
            <div class="box_text">
                Armamento_text
            </div>
        </a>
        </div> 
</div>
<div class="row">
    <!--MISC-->
    <div class="col-sm-2">
        <a href="Second_web.html">
            <img src="img/test_img.png" width=100%>
            <div class="box_text">
                MISC
            </div>
        </a>
        </div>
</div>

CSS 看起来像这样:

.box_text {
margin-bottom: 20px;
}

img {
    max-width: 100px;
    height: auto;
}

当我调整屏幕大小时，我希望图像调整大小并变小，保持相同的比例，但右列移动并且所有图像覆盖整个屏幕。

Answer 1

如果你想在一行中放置 2 张图片，为什么要使用 col-sm-2 而不是 col-sm-6 ？

无论如何，要回答您的问题，您应该阅读有关 boostrap3 断点的信息。查看 col-sm 变成 100% 宽度列的位置。您可以在 bs3 docs 上找到更多信息

因此，如果您希望您的列始终保持 2 在一行中，请向它们添加 col-xs 类。 (这是在 bs3 中，在 bs4 中 col-xs 不存在。如果你更新到 bs4，请阅读关于那个的更改日志，阅读关于 bs4 -> bs4 docs )

我更改为 col-6 但如果您需要的话，您可以保留 col-2。

见下文或 jsfiddle

.box_text {
  margin-bottom: 20px;
}

img {
  max-width: 100px;
  height: auto;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <!--Reglamento-->
  <div class="col-sm-6 col-xs-6">
    <a href="Second_web.html">
        <img src="https://via.placeholder.com/150" width=100%>
        <div class="box_text">
            Reglamento_text
        </div>
    </a>
  </div>

  <!--Armamento-->
  <div class="col-sm-6 col-xs-6">
    <a href="Second_web.html">
            <img src="https://via.placeholder.com/150" width=100%>
            <div class="box_text">
                Armamento_text
            </div>
        </a>
  </div>
</div>
<div class="row">
  <!--MISC-->
  <div class="col-sm-6 col-xs-6">
    <a href="Second_web.html">
            <img src="https://via.placeholder.com/150" width=100%>
            <div class="box_text">
                MISC
            </div>
        </a>
  </div>
  <div class="col-sm-6 col-xs-6">
    <a href="Second_web.html">
            <img src="https://via.placeholder.com/150" width=100%>
            <div class="box_text">
                MISC
            </div>
        </a>
  </div>
</div>