时间戳

首页 > 解决方案 > bootstrap 4 card-deck 包含不同宽度的卡片

bootstrap-4 - bootstrap 4 card-deck 包含不同宽度的卡片

问题描述

我正在尝试card-deck在 bootstrap 4 中使用 a ，其中包含不同宽度的卡片。

对于单张卡片，您可以执行以下操作来更改宽度（或使用 class w-25，w-50或者w-75如果 25%、50% 或 75% 宽度适合您的需要）：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
    </div>
  </div>
  <br>
  <div class="card" style="width: 30%">
    <div class="card-header">Header</div>
    <div class="card-body">
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
    </div>
  </div>
  <br>
  <div class="card" style="width: 70%">
    <div class="card-header">Header</div>
    <div class="card-body">
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
    </div>
  </div>

</div>

对于card-deck包含相同宽度的卡片，您可以这样做：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Card Deck with equal width</h1>
  <div class="card-deck">
    <div class="card">
      <div class="card-header">Header</div>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-header">Header</div>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
      </div>
    </div>
  </div>
  <br>

</div>

为了card-deck包含不同宽度的卡片，我尝试了这个（没有成功）：
注意：卡片的显示宽度相同，即使它们有不同的宽度......

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="card-deck">
    <div class="card" style="width: 30%">
      <div class="card-header">Header</div>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
      </div>
    </div>
    <div class="card" style="width: 70%">
      <div class="card-header">Header</div>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisici elit.</p>
      </div>
    </div>
  </div>
</div>

所以很明显我在这里做错了（或者bootstrap 4不支持这个）。任何建议如何使用card-deck不同宽度的包含卡？

标签： bootstrap-4

解决方案

如文档中所示，card-deck是等宽卡片。如果您想要不同的宽度，请将卡片包装在 Bootstrap 网格中...

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100">
                ...
            </div>
        </div>
        <div class="col-md-3">
            <div class="card h-100">
                ...
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/8qpkLw5Dfv

或者，使用自定义 CSS 设置卡片组的弹性基础和最大宽度...

.card-deck .cw-30 {
    flex: 1 0 30%;
    max-width: 30%;
}

.card-deck .cw-70 {
    flex: 1 0 70%;
    max-width: 70%;
}

https://www.codeply.com/go/JiAEZdT0Ob

相关：Bootstrap 4 卡片组中不同大小的卡片

推荐阅读