Bootstrap 4-卡组等高的卡体等

Question

我想通过Bootstrap 4的card-group获得以下结果：

所有内容的高度相同（卡片标题，卡片标题和小的子文本，如果存在，则每个第一列表项都从相同的垂直位置开始，页脚中的按钮）。

到目前为止，我的代码：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 
 <div class="card-group card-group-md">
       <div class="card mb-4 shadow-sm">
          <div class="card-header">
             <h4 class="my-0 font-weight-normal">Kostenlos (Einführungsangebot)</h4>
          </div>
          <div class="card-body">
             <h5 class="card-title pricing-card-title">
                Kostenlos
             </h5>
             <small>Preis inkl. MwSt.</small>
             <ul class="list-unstyled mt-3 mb-4">
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   uneingeschränkte Suchfunktionalität in aktuellen Auktionen
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Merkzettelfunktion
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   5 Suchaufträge (Alerts)
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   7 Tage kostenloser Archiv-Zugang zu<br>über 25 Millionen Auktionslosen<br><strong>am Tag Ihrer Registrierung</strong>
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   7 Tage kostenloser Zugang zu <br>unserem Künstlerindex mit Charts &amp; Analysen<br><strong>am Tag Ihrer Registrierung</strong>                    
                </li>
             </ul>
          </div>
          <div class="card-footer bg-white">
             <button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
          </div>
       </div>
       <div class="card mb-4 shadow-sm">
          <div class="card-header">
             <h4 class="my-0 font-weight-normal">Basic</h4>
          </div>
          <div class="card-body">
             <h5 class="card-title pricing-card-title">                9,95&nbsp;€ <span class="period">/ Monat</span>                    </h5>
             <small>Preis inkl. MwSt.</small>
             <small>Mindestvertragslaufzeit: 12 Monate                *
             </small>
             <ul class="list-unstyled mt-3 mb-4">
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   uneingeschränkte Suchfunktionalität (in aktuellen und Archiv-Auktionen)
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Merkzettelfunktion
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   25 Suchaufträge (Alerts)
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Zugang zum Archiv mit<br>über 25 Millionen Auktionslosen
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Künstlerindex mit Charts &amp; Analysen                
                </li>
             </ul>
          </div>
          <div class="card-footer bg-white">
             <button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
          </div>
       </div>
       <div class="card mb-4 shadow-sm">
          <div class="card-header">
             <h4 class="my-0 font-weight-normal">Premium</h4>
          </div>
          <div class="card-body">
             <h5 class="card-title pricing-card-title">                29,95&nbsp;€ <span class="period">/ Monat</span>                    </h5>
             <small>Preis inkl. MwSt.</small>
             <small>Mindestvertragslaufzeit: 12 Monate                *
             </small>
             <ul class="list-unstyled mt-3 mb-4">
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   uneingeschränkte Suchfunktionalität (in aktuellen und Archiv-Auktionen)
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Merkzettelfunktion
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   500 Suchaufträge (Alerts)
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Zugang zum Archiv mit<br>über 25 Millionen Auktionslosen
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Künstlerindex mit Charts &amp; Analysen                
                </li>
             </ul>
          </div>
          <div class="card-footer bg-white">
             <button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
          </div>
       </div>
       <div class="card mb-4 shadow-sm">
          <div class="card-header">
             <h4 class="my-0 font-weight-normal">Auf Anfrage</h4>
          </div>
          <div class="card-body">
             <h5 class="card-title pricing-card-title">
                Auf Anfrage            
             </h5>
             <ul class="list-unstyled mt-3 mb-4">
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Individueller Scout-Service
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Beliebig viele Suchaufträge (&gt; 500)
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Alle LotSearch Services
                </li>
                <li>
                   <i class="fa fa-fw fa-check"></i>
                   Sie erhalten zunächst unsere kostenlose Mitgliedschaft, bis wir Ihnen ein individuelles Angebot vorgeschlagen haben, mit dem Sie einverstanden sind.                    
                </li>
             </ul>
          </div>
          <div class="card-footer bg-white">
             <button type="button" class="btn btn-lg btn-block btn-outline-primary">Produkt auswählen</button>
          </div>
       </div>
    </div>

https://codepen.io/anon/pen/EdpraE

目前，我遇到了一个问题，即文本在窄行（Kostenlos (Einführungsangebot)）的灰色列中换行，这破坏了整洁的布局。

下图显示了我的问题：

card-group是否可行？还是我需要摆弄row + col类？也许可以使用一些flexbox的魔法吗？

Answer 1

由于文本变小，您不能期望元素具有相同的大小。

在这种特定情况下，我要做的是为特定部分设置最小高度，因此，假设您希望标题在第一张卡中具有大小，只需将标题的最小高度设置为150px； < / p>

关于列表，如果有更多项目，则所有部分都应与该部分相关。您可以通过在卡片上应用100％的高度来做到这一点；

我认为在这种特定情况下，您需要的只是设置卡头的最小高度，尝试应用最小高度：109像素

Answer 2

这可以通过 2种方式来实现。

第一个（仅CSS）是最简单但最丑的一个。 这是为了将标题的高度设置为2规则显示。

这很丑陋，因为如果只有1条规则的字段将有太多空间。如果还有更多内容，文本将立即显示。但是，如果您通过使用rem，vw，vh，使文本具有响应能力，它也会缩放。

第二个（JS）比较漂亮，但可以与javascript一起使用。这会寻找最大尺寸，并将所有其他div设置为此。

您可以在window.resize上调用此事件。

文档：

Resize

JS to equalize heights