制作水平bootstrap 5 卡牌图像高度的卡体

Question

使用Bootstrap 5.1.3，如何让图像成为卡片正文和页脚的高度？修复此问题还应将卡片页脚放在卡片底部。

我想要达到的结果：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="container">
  <div class="card">
    <div class="row g-0">
      <div class="col-sm-4">
        <img src="https://via.placeholder.com/150" class="h-100 card-img" alt="..."
      style="object-fit: cover;">
      </div>
      <div class="col-sm-8">
        <div class="card-body">
          <h5 class="card-title">
            <a class="link-dark text-decoration-none" href="#" target="_blank">Card
          Title</a>
          </h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span class="badge rounded-pill bg-dark">Tag1</span>
        </div>
        <div class="card-footer text-end text-muted">
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

您要求制作 > 卡片图片卡片主体的高度。但根据我的说法，内容应该跟随图像的高度。

为了达到我添加的屏幕截图中的结果

style="height: calc(100% - 41px);"

到card-body降低页脚高度。它现在将占据父元素的全高。检查这是否解决了你的问题如果还有什么让我知道

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="container">
  <div class="card">
    <div class="row g-0">
      <div class="col-sm-4">
        <img src="https://via.placeholder.com/150" class="h-100 card-img" alt="..."
      style="object-fit: cover;">
      </div>
      <div class="col-sm-8">
        <div class="card-body" style="height: calc(100% - 41px);">
          <h5 class="card-title">
            <a class="link-dark text-decoration-none" href="#" target="_blank">Card
          Title</a>
          </h5>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span class="badge rounded-pill text-bg-secondary">Tag1</span>
        </div>
        <div class="card-footer text-end text-muted">
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">


<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col card" style="flex-direction: row;">
    <div class=" h-100">
      <img src="https://img.freepik.com/free-psd/futuristic-glow-t…ect-psd-editable-template_53876-115831.jpg?w=2000" class="card-img-top" alt="..." style="width: 240px;">
    </div>
    <div>
      <div class="card-body px-2 py-2 p-0">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <div class="border-top">
          <small>Update 2min ago</small>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

我倾向于避免绝对定位，但它在移动断点上方有效。为此添加一些 classes（包括在父元素上），并为响应式图像样式创建 class。

.fit-cover {
  object-fit: cover;
}

@media (min-width: 768px) {
  .fit-cover {
    position: absolute;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css">
<div class="container">
  <div class="card">
    <div class="row g-0">
      <div class="col-sm-4 position-relative">
        <img src="https://via.placeholder.com/600" class="card-img fit-cover w-100 h-100" alt="...">
      </div>

      <div class="col-sm-8">
        <div class="card-body">
          <h5 class="card-title">
            <a class="link-dark text-decoration-none" href="#" target="_blank">Card
          Title</a>
          </h5>

          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
          <span class="badge rounded-pill bg-dark">Tag1</span>
        </div>

        <div class="card-footer text-end text-muted">
          Last updated today.
        </div>
      </div>
    </div>
  </div>
</div>

制作水平bootstrap 5 卡牌图像高度的卡体

Make horizontal bootstrap 5 cards image height of the card body

html

css

bootstrap-5