当屏幕随着链接的图像变小时，如何保持Bootstrap 4的大小？

Question

我需要在右边的第二个容器中获取图像，以从右边的垂直切换为第一个容器下的水平图像，并随着屏幕变小而变小。在我添加“

我尝试了几种不同的解决方案，包括将col-md-10 col-sm-3从“ img-responsive更改为{{ 1}}，但似乎无法调整大小。

img-fluid

Answer 1

如果您使用的是Bootstrap 4，则一定要使用android.intent.action.MY_PACKAGE_REPLACED来调整图像大小，see the bootstrap docs

为了在使用sm屏幕时使图像水平对齐，应将其放在带有img-fluid的元素中。仅使用display: flex类会导致在大屏幕上换行时出现问题，因此d-flex似乎是您的最佳选择：

row

我已经制作了fiddle来显示此工作。

Answer 2

我知道了。答案是将每个图像并链接到一个单独的容器中，并为小页面添加col-3。

<div class="row">
    <div class="container col-md-10 col-sm-3 col-3">
        <a href="Lorem.html">
        <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png" data-holder-rendered="true">
        </a>
    </div>
    <div class="container col-md-10 col-sm-3 col-3">
        <a href="Lorem.html">
        <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png"data-holder-rendered="true">
        </a>
    </div>
    <div class="container col-md-10 col-sm-3 col-3">
        <a href="Lorem.html">
        <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png"data-holder-rendered="true">
        </a>
    </div>
    <div class="container col-md-10 col-sm-3 col-3">
        <a  href="Lorem.html">
        <img data-src="holder.js/200x200" class="img-fluid mx-auto d-block shadow" alt="200x200" src="Lorems.png" data-holder-rendered="true">
        </a>
    </div>
</div>