Bootstrap网格中矩形与方形图片列高度对齐问题求助

问题出在哪？ #

你遇到的核心问题很明确：左侧两个方形图的容器都加了padding-bottom:20px，导致左侧列总高度是「两张图高度 + 20px中间间隙」；而右侧矩形图的容器只有自己的20px底部padding，两边高度差了20px，自然对不齐。另外你试的百分比height没用，是因为父容器高度没明确，height:100%找不到参照对象，白搭。

推荐方案：用Flex布局强制等高（最靠谱） #

Bootstrap本身支持flex，咱们直接给外层row加flex属性，让左右两列自动等高，再让右侧图片填满整个列高度就行。

步骤1：添加自定义CSS

/* 让外层row变成flex容器，移动端自动换行 */
.flex-equal-height {
  display: flex;
  flex-wrap: wrap;
}

/* 让左右列变成flex列布局，方便内部元素填充高度 */
.flex-equal-height .col-sm-8,
.flex-equal-height .col-sm-4 {
  display: flex;
  flex-direction: column;
}

/* 让右侧图片容器填满整个列的高度 */
.flex-equal-height .col-sm-4 .moodboard-image-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 让图片链接容器也填满高度 */
.flex-equal-height .col-sm-4 .contains-image-with-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 让图片填充剩余高度，同时保持比例（cover是裁剪，contain是完整显示，按需选） */
.flex-equal-height .col-sm-4 img {
  flex: 1;
  object-fit: cover;
  width: 100%;
}

步骤2：修改HTML外层row

给最外层的.row加上flex-equal-height类就行，其他内容不用改：

<div class="row flex-equal-height">
  <!-- 左侧col-sm-8内容不变 -->
  <div class="col-sm-8">...</div>
  <!-- 右侧col-sm-4内容不变 -->
  <div class="col-sm-4 text-sm-right">...</div>
</div>

备选方案：调整padding消除高度差 #

如果不想用flex，也可以直接调整padding的分布：

方案A：只给左侧最后一个容器加padding-bottom

把左侧第一个方形图容器的padding-bottom去掉，只留第二个的：

.col-sm-8 .row:first-child .moodboard-image-item {
  padding-bottom: 0;
}
.col-sm-8 .row:last-child .moodboard-image-item {
  padding-bottom: 20px;
}

这样左侧总高度就和右侧一致了，只要图片本身比例正确，就能对齐。

方案B：给右侧容器补高度

给右侧的.adjust-height-to-gaps类加20px高度补偿，记得配合box-sizing避免宽度溢出：

.adjust-height-to-gaps {
  height: calc(100% + 20px);
  box-sizing: border-box;
}
.adjust-height-to-gaps img {
  height: 100%;
  object-fit: cover;
}

注意：这个方法需要右侧列的父容器有明确高度，最好配合上面的flex等高布局一起用，不然height:100%还是无效。

完整修改后的代码示例 #

这里整合了方法1的完整代码，直接用就行：

<div class="row flex-equal-height">
  <div class="col-sm-8">
    <div class="row">
      <div class="col-sm-6 text-sm-left">
        <div class="col-xs-12 moodboard-image-item ">
          <a href="http://fr.lipsum.com/feed/html" class="contains-image-with-overlay">
            <picture>
              <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-mobile-moodboardimg/industriel-mobile_1.jpg" media="(max-width: 767px)">
              <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-desktop-moodboardimg/industriel-desktop_1.jpg" media="(min-width: 768px)">
              <img class="img-responsive" src="/sites/mysite/files/2018-01/image-desktop-moodboardimg/industriel-desktop_1.jpg" alt="Industriel" data-pin-nopin="1">
            </picture>
            <div class="moodboard-image-title bg-moodboard-title-black"> Industriel </div>
          </a>
        </div>
      </div>
      <div class="col-sm-6 text-sm-center">
        <div class="col-xs-12 moodboard-image-item ">
          <a href="http://fr.lipsum.com/feed/html" class="contains-image-with-overlay">
            <picture>
              <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-mobile-moodboardimg/classique-chic-mobile_0.jpg" media="(max-width: 767px)">
              <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-desktop-moodboardimg/classique-chic-desktop_0.jpg" media="(min-width: 768px)">
              <img class="img-responsive" src="/sites/mysite/files/2018-01/image-desktop-moodboardimg/classique-chic-desktop_0.jpg" alt="Classique chic" data-pin-nopin="1">
            </picture>
            <div class="moodboard-image-title bg-moodboard-title-black"> Classique chic </div>
          </a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 text-sm-left">
        <div class="col-xs-12 moodboard-image-item ">
          <a href="http://fr.lipsum.com/feed/html" class="contains-image-with-overlay">
            <picture>
              <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-mobile-moodboardimg/vintage-mobile_0.jpg" media="(max-width: 767px)">
              <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-desktop-moodboardimg/vintage-desktop_0.jpg" media="(min-width: 768px)">
              <img class="img-responsive" src="/sites/mysite/files/2018-01/image-desktop-moodboardimg/vintage-desktop_0.jpg" alt="Vintage" data-pin-nopin="1">
            </picture>
            <div class="moodboard-image-title bg-moodboard-title-black"> Vintage </div>
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-4 text-sm-right">
    <div class="col-xs-12 moodboard-image-item adjust-height-to-gaps">
      <a href="http://fr.lipsum.com/feed/html" class="contains-image-with-overlay">
        <picture>
          <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-mobile-moodboardimg/modern-design-mobile_0.jpg" media="(max-width: 767px)">
          <source class="img-responsive" srcset="/sites/mysite/files/2018-01/image-desktop-moodboardimg/modern-design-desktop_0.jpg" media="(min-width: 768px)">
          <img class="img-responsive" src="/sites/mysite/files/2018-01/image-desktop-moodboardimg/modern-design-desktop_0.jpg" alt="Moderne design" data-pin-nopin="1">
        </picture>
        <div class="moodboard-image-title bg-moodboard-title-black"> Moderne design </div>
      </a>
    </div>
  </div>
</div>

对应的CSS：

.flex-equal-height {
  display: flex;
  flex-wrap: wrap;
}

.flex-equal-height .col-sm-8,
.flex-equal-height .col-sm-4 {
  display: flex;
  flex-direction: column;
}

.flex-equal-height .col-sm-4 .moodboard-image-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  padding-right: 20px;
  padding-bottom: 20px;
}

.flex-equal-height .col-sm-4 .contains-image-with-overlay {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-equal-height .col-sm-4 img {
  flex: 1;
  object-fit: cover;
  width: 100%;
}

.moodboard-image-item {
  padding-left: 0;
  padding-right: 20px;
  padding-bottom: 20px;
}

.contains-image-with-overlay img {
  display: block;
  max-width: 100%;
}

内容的提问来源于stack exchange，提问作者Charles Dexter Ward