如何在引导程序中制作响应式画廊布局？答案

【问题标题】：How to make responsive gallery layout in bootstrap?如何在引导程序中制作响应式画廊布局？
【发布时间】：2019-07-11 04:44:17
【问题描述】：

我制作了画廊，但是一旦我调整了窗口大小，图像就会开始堆叠。如何使每个屏幕尺寸的布局保持不变？

<div class="container"> 
    <div class="gallery">
        <a href="images/tepihg1.jpg" data-lightbox="mygallery" data-title="Tepih1"> <img src="images/tepihg1.jpg" class="img-fluid"> </a>
        <a href="images/tepihg2.jpg" data-lightbox="mygallery" data-title="Tepih2"> <img src="images/tepihg2.jpg" class="img-fluid"> </a>
        <a href="images/tepihg3.jpg" data-lightbox="mygallery" data-title="Tepih3"> <img src="images/tepihg3.jpg" class="img-fluid"> </a>
    </div>
</div>

<style>
.gallery {
    margin: 30px 0 50px;

}
.gallery img {
    max-width: 200px; 
    height: 200px;
    object-fit: cover;
    padding: 5px;
}

.gallery img:hover{
    transform: scale(1.1);
}
</style>

【问题讨论】：

请使用{} 按钮正确插入您的代码。请检查行为准则 [stackoverflow.com/conduct]，切勿将代码作为图片发布，因为这很难理解。
我做到了，但我不断收到消息说我的代码没有正确格式化为代码。我点击了 { } 按钮并留了 4 个空格并尝试了 CTRL+K，但我一次又一次地收到相同的消息，并且很沮丧。
只需将您的代码粘贴为普通文本，然后您可以选择所有代码并单击{}。这是插入代码块的最佳方式。
谢谢你，最后，我想我需要先按{}。

标签： javascript jquery html css bootstrap-4

【解决方案1】：

您可以更改.gallery img CSS。如果您只显示 3 张图像。最大宽度必须是 33.33% 减去填充。检查这个sn-p。

<div class="container"> 
    <div class="gallery">
        <a href="images/tepihg1.jpg" data-lightbox="mygallery" data-title="Tepih1"> <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" class="img-fluid"> </a>
        <a href="images/tepihg2.jpg" data-lightbox="mygallery" data-title="Tepih2"> <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" class="img-fluid"> </a>
        <a href="images/tepihg3.jpg" data-lightbox="mygallery" data-title="Tepih3"> <img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" class="img-fluid"> </a>
    </div>
</div>

<style>
.gallery {
    margin: 30px 0 50px;

}
.gallery img {
    max-width: calc(33.3333% - 20px);
    object-fit: cover;
    padding: 5px;
}

.gallery img:hover{
    transform: scale(1.1);
}
</style>

【讨论】：

谢谢先生！现在只是图像大小不同，有什么帮助吗？
如果我想添加更多图片，max-width如何变化？
也许你可以试试图片滑块。像这样：jssor.com/demos/image-gallery.slider