html - Bootstrap 4 图像网格对齐

Question

所以我正在使用 bootstrap 4 创建图像网格。所有网格都包含在“showcase”类中。第一行有 2 张风景照片，第二行有 3 张肖像照片。问题是，我希望肖像照片与风景照片对齐。左边 1 张，中间 1 张，右边 1 张。我希望它们具有相同的边距，这样看起来不错。

我自己尝试使用谷歌搜索和设置边距。我尝试使用“row-sm-4”之类的东西。

<div class = "showcase">
              <!-- First row with 2 landscape wallpapers -->
              <div class = "row" id = "land">
                <div class = "col">
                      <img src="img/land1.jpg" class="rounded float-left" alt = "Landscape wallpaper" width = "500" height = "350">
                      <img src="img/land2.jpg" class="rounded float-right" alt = "Landscape wallpaper" width = "500" height = "350">
              </div>
            </div>
              <!-- Second row with 3 portrait wallpapers-->
              <div class = "row" id = "port">
                <div class = "col-bg-4">
                  <img src="img/p1.jpeg" class="rounded float-left" id = "firstp" alt = "Portrait wallpaper" width = "200" height = "350">
                  <img src="img/p2.jpg" class="float-center" id = "secondp" alt = "Portrait wallpaper" width = "200" height = "350"> 
                  <img src="img/p3.jpg" class="rounded float-right" alt = "Portrait wallpaper" width = "200" height = "350">  
              </div>
            </div>
          </div>

它应该以相同的左右边距显示所有照片。

Answer 1

如果我完全理解您的意思，那么我认为您需要做的是将图像放入正确数量的列中。例如:

您的 2 张横向图片需要分成两列，跨度为 6。

您的 4 张肖像图像需要分成 3 列，跨度为 4。

这看起来应该是这样的:

           <div class = "showcase">
              <!-- First row with 2 landscape wallpapers -->
              <div class = "row" id = "land">
                <div class = "col-6">
                      <img src="img/land1.jpg" class="rounded" alt = "Landscape wallpaper" width = "500" height = "350">
                </div>
                <div class="col-6">
                      <img src="img/land2.jpg" class="rounded" alt = "Landscape wallpaper" width = "500" height = "350"> 
                </div>
              </div>
            </div>
              <!-- Second row with 3 portrait wallpapers-->
              <div class = "row" id = "port">
                  <div class="col-4">                  
                      <img src="img/p1.jpeg" class="rounded" id = "firstp" alt = "Portrait wallpaper" width = "200" height = "350">
                  </div>
                  <div class="col-4 text-center">                  
                      <img src="img/p2.jpg" class="" id = "secondp" alt = "Portrait wallpaper" width = "200" height = "350"> 
                  </div>

                  <div class="col-4">
                       <img src="img/p3.jpg" class="rounded" alt = "Portrait wallpaper" width = "200" height = "350">
                  </div>  
              </div>
          </div>

让我知道进展如何!您也不需要 float