如何创建大屏3列、移动端2列的响应式图片画廊？

问题根源 #

你当前的代码是把图片预先塞进3个col-md-4容器里，移动端时col-md-4会自动占满整行宽度，导致三个容器依次堆叠，自然最后一列会跑到第一列下方。这种手动分组的方式不适合响应式自动排列需求。

修复方案 #

不用放弃Bootstrap，只需调整布局结构，结合Bootstrap的网格和宽高比工具就能实现需求：

1. 调整HTML结构 #

把每个图片放在独立的响应式列容器里，大屏用col-md-4（3列），移动端用col-sm-6（2列），让Bootstrap自动帮你排列：

<div class="container">
    <div class="row">
        <div class="break"></div>
        <h4 class="headline text-center w-100">illustrations.</h4>
        <div class="break"></div>
        
        <!-- 每张图片对应一个响应式列 -->
        <div class="col-md-4 col-sm-6 mb-3">
            <div class="ratio ratio-4x3"> <!-- 可根据图片实际比例替换，比如ratio-16x9 -->
                <img src="Assets/Illustrations/Test3.jpg" alt="Test6" class="img-fluid object-fit-cover">
            </div>
        </div>
        <div class="col-md-4 col-sm-6 mb-3">
            <div class="ratio ratio-4x3">
                <img src="Assets/Illustrations/Test4.jpg" alt="Test5" class="img-fluid object-fit-cover">
            </div>
        </div>
        <div class="col-md-4 col-sm-6 mb-3">
            <div class="ratio ratio-4x3">
                <img src="Assets/Illustrations/Test6.jpg" alt="Test4" class="img-fluid object-fit-cover">
            </div>
        </div>
        <div class="col-md-4 col-sm-6 mb-3">
            <div class="ratio ratio-4x3">
                <img src="Assets/Illustrations/Test1.jpg" alt="Test3" class="img-fluid object-fit-cover">
            </div>
        </div>
        <div class="col-md-4 col-sm-6 mb-3">
            <div class="ratio ratio-4x3">
                <img src="Assets/Illustrations/Test5.jpg" alt="Test2" class="img-fluid object-fit-cover">
            </div>
        </div>
        <div class="col-md-4 col-sm-6 mb-3">
            <div class="ratio ratio-4x3">
                <img src="Assets/Illustrations/Test2.jpg" alt="Test1" class="img-fluid object-fit-cover">
            </div>
        </div>
    </div>
</div>
<div class="break"></div>

2. 关键细节说明 #

• 响应式列：col-md-4 col-sm-6 表示屏幕≥768px（md断点）时占1/3宽度（3列），屏幕≥576px（sm断点）时占1/2宽度（2列），更小屏幕自动变为1列（需固定1列可加col-12）。
• 固定宽高比：Bootstrap内置的ratio类可固定容器比例，若需自定义比例（比如3:2），添加自定义CSS：

  .ratio-custom {
      --bs-aspect-ratio: calc(2/3 * 100%); /* 高度/宽度*100% */
  }
  

  之后用ratio ratio-custom替代内置类即可。
• 图片填充：img-fluid让图片自适应容器宽度，object-fit-cover保证图片填充容器且保持比例（不会拉伸，超出部分裁剪；需完整显示用object-fit-contain）。
• 间距控制：mb-3给每个图片容器添加底部间距，避免图片拥挤。

3. 灵活替代方案（适配任意图片比例） #

如果图片比例不一致但需列内对齐，可结合CSS Grid和Bootstrap断点：

<div class="container">
    <div class="row">
        <div class="break"></div>
        <h4 class="headline text-center w-100">illustrations.</h4>
        <div class="break"></div>
        
        <div class="gallery-grid w-100">
            <img src="Assets/Illustrations/Test3.jpg" alt="Test6" class="gallery-item">
            <img src="Assets/Illustrations/Test4.jpg" alt="Test5" class="gallery-item">
            <img src="Assets/Illustrations/Test6.jpg" alt="Test4" class="gallery-item">
            <img src="Assets/Illustrations/Test1.jpg" alt="Test3" class="gallery-item">
            <img src="Assets/Illustrations/Test5.jpg" alt="Test2" class="gallery-item">
            <img src="Assets/Illustrations/Test2.jpg" alt="Test1" class="gallery-item">
        </div>
    </div>
</div>
<div class="break"></div>

对应CSS：

.gallery-grid {
    display: grid;
    gap: 1rem; /* 图片间距 */
}

/* 大屏3列 */
@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 移动端2列 */
@media (max-width: 767px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.gallery-item {
    width: 100%;
    height: auto;
    object-fit: cover; /* 保持比例填充 */
    display: block;
}

此方案无需手动分组，列宽自动对齐，同时保留图片原始比例。

内容的提问来源于stack exchange，提问作者Coolbeans