bootstrap 4卡套，其中包含不同宽度的卡 [英] bootstrap 4 card-deck containing cards with different width

问题描述

我正在尝试在引导程序4中使用card-deck，其中包含宽度不同的卡片.

I am trying to use a card-deck in bootstrap 4 which contain cards with different width.

对于单张卡，您可以执行以下操作来更改宽度(如果25％，50％或75％的宽度适合您的需要，请使用类w-25，w-50或w-75):

For single cards you do the following to change the width (or use class w-25, w-50 or w-75 if the 25%, 50% or 75% width fit your needs):

<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，请执行以下操作:

For a card-deck containing cards with equal width you do this:

<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包含不同宽度的卡片，我尝试过此操作(未成功):
注意:即使卡片的宽度不同，它们也将以相等的宽度显示...

To have a card-deck containing cards with different width I tried this (without success):
Note: The cards are displayed with equal width even that they have different width...

<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>

所以很明显我在这里做错了(或引导程序4不支持此操作).关于如何使用card-deck包含不同宽度的卡片的任何建议?

so obviously I'm doing something wrong here (or bootstrap 4 is not supporting this). any suggestions how to use a card-deck containing cards with different width?

推荐答案

如所示在文档中，card-deck是等宽卡片.如果您想使用其他宽度，请在Bootstrap网格中将卡包装起来...

As indicated in the docs, the card-deck is equal width cards. If you want different width wrap the cards in the Bootstrap grid...

<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来设置卡片组卡片的弹性基础和最大宽度...

Or, use custom CSS to set the flex basis and max-width of the card-deck cards...

.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卡中具有不同大小的卡-组

这篇关于bootstrap 4卡套，其中包含不同宽度的卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！