当水平卡列不同大小时使Bootstrap网格卡等高答案

【问题标题】：Making Bootstrap grid cards equal height when horizontal card columns are different sizes当水平卡列不同大小时使Bootstrap网格卡等高
【发布时间】：2021-12-04 03:46:05
【问题描述】：

我想要什么 - 我正在使用Bootstrap grid cards 连续创建两张卡片，它们在更宽的屏幕上水平对齐且高度相同。我想保留第一张图片 (col-md-4, col-md-8) 并制作第二张图片 (col-md-5, col-md-7) 以在卡片中显示更多图片，但是当我这样做第二张卡片图像的高度更高。您可以在Stackblitz 和下面的图片中看到这一点。

问题 - 第一张图片是 1:1，第二张图片是 16:9，我想要更多的第二张图片 (16:9) 在第二张卡片中显示（更宽） .但是增加第二张图片中的列大小会增加高度，这不是我想要的。

Stackblitz - component, url

我尝试过什么 - 我可以并且已经创建了 2 张卡片，它们都使用卡片中的水平放置，使用行和列（col-md-4、col-md-8），其中使图像的高度相等。我在每张卡上使用了一类“h-100”。但是当我将第二张图片的列更改为 (col-md-5, col-md-7) 以显示更多图片时，卡片的大小会增加，导致第一张卡片的大小不正确。

我想我可以说另一种方式，我不希望图像扩展得高于文本（右侧列）。

这是来自我的 Stackblitz 的图片。顶行是我为每个图像设置的相同列，底行是当我增加第二个图像的列大小时。注意 - 我不想增加高度，只是增加宽度。

这是我正在使用的代码。

<div class="container my-3 my-xl-5">
  <div class="row">
    <div class="col-lg-3">
      some text
    </div>
    <div class="col-lg-9">
      <div class="py-2">
        <div class="row row-cols-1 row-cols-md-2">
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
                  </picture>
                </div>
                <div class="col-md-8">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Brad</h5>
                        <span class="float-right center-star">4.4</span>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-12">
                        <span>Level</span>
                        <span class="float-right">3</span>
                      </div>
                      <div class="col-12">
                        <span>Experience</span>
                        <span class="float-right">Expert</span>
                      </div>
                      <div class="col-12">
                        <span>Instructed</span>
                        <span class="float-right">14</span>
                      </div>
                      <div class="col-12">
                        <span>Education</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
                  </picture>
                </div>
                <div class="col-md-8">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Park</h5>
                        <span class="float-right center-star">
                            3.4
                          </span>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12">
                        <span>Access</span>
                        <span class="float-right">None</span>
                      </div>
                      <div class="col-12">
                        <span>Max Size</span>
                        <span class="float-right">10</span>
                      </div>
                      <div class="col-12">
                        <span>Hosted</span>
                        <span class="float-right">2</span>
                      </div>
                      <div class="col-12">
                        <span>Type</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="py-2">
        <div class="row row-cols-1 row-cols-md-2">
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-4">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
                  </picture>
                </div>
                <div class="col-md-8">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Brad</h5>
                        <span class="float-right center-star">4.4</span>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-12">
                        <span>Level</span>
                        <span class="float-right">3</span>
                      </div>
                      <div class="col-12">
                        <span>Experience</span>
                        <span class="float-right">Expert</span>
                      </div>
                      <div class="col-12">
                        <span>Instructed</span>
                        <span class="float-right">14</span>
                      </div>
                      <div class="col-12">
                        <span>Education</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col mb-4">
            <div class="card h-100">
              <div class="row no-gutters">
                <div class="col-md-5">
                  <picture>
                    <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1631484260/Chuckd/yogabands/CerroCrest/wx415paoq5f0nfzhixcy.jpg" alt="place">
                  </picture>
                </div>
                <div class="col-md-7">
                  <div class="card-body py-1">
                    <div class="row">
                      <div class="col-12">
                        <h5 class="card-title d-inline">Park</h5>
                        <span class="float-right center-star">
                            3.4
                          </span>
                      </div>
                    </div>

                    <div class="row">
                      <div class="col-12">
                        <span>Access</span>
                        <span class="float-right">None</span>
                      </div>
                      <div class="col-12">
                        <span>Max Size</span>
                        <span class="float-right">10</span>
                      </div>
                      <div class="col-12">
                        <span>Hosted</span>
                        <span class="float-right">2</span>
                      </div>
                      <div class="col-12">
                        <span>Type</span>
                        <span class="float-right">None</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

通过创建class 的卡片的Targetting the image column 对我有用。

例如，

1# 这是一张卡片的HTML。

<div class="col mb-4 bg-green1">
          <div class="card h-100">
            <div class="row no-gutters">
              <div class="col-md-4 my-custom-class">
                <picture>
                  <img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
                </picture>
              </div>
              <div class="col-md-8">
                <div class="card-body py-1">
                  <div class="row">
                    <div class="col-12">
                      <h5 class="card-title d-inline">Brad</h5>
                      <span class="float-right center-star">4.4</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-12">
                      <span>Level</span>
                      <span class="float-right">3</span>
                    </div>
                    <div class="col-12">
                      <span>Experience</span>
                      <span class="float-right">Expert</span>
                    </div>
                    <div class="col-12">
                      <span>Instructed</span>
                      <span class="float-right">14</span>
                    </div>
                    <div class="col-12">
                      <span>Education</span>
                      <span class="float-right">None</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

2# 我创建了一个类 my-custom-class 来定位图像区域。

<div class="col-md-4 my-custom-class">
<picture>
<img class="img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_150,h_150/f_auto/v1630987567/mtnbxdhneddswogt3kq1.png" alt="person">
</picture>
</div>

3# 这是我写的 CSS 属性

.my-custom-class{
   min-height: 130px;
   overflow: hidden;
}

注意：它不会对卡片的响应造成任何问题。

结果

Desktop Version

Responsive Version

【讨论】：