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

Question

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

对于单张卡片，您可以执行以下操作来更改宽度(如果 25%、50% 或 75% 的宽度适合您的需要，则使用类 w-25、w-50 或 w-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 的建议包含不同宽度的卡片？

Answer 1

如所示 in the docs , 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 设置卡片组卡片的 flex 基础和最大宽度...

.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

相关: Cards with different sizes in Bootstrap 4 card-group