【发布时间】：2018-10-22 22:52:39
【问题描述】：
我想用 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 & 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 € <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 & 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 € <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 & 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 (> 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 魔法？
【问题讨论】：
-
您可以在描述中设置硬编码的最小高度。但是
flexbox的目的是允许内容增长/缩小，因此异常不再破坏总体布局。为什么每个人都试图将其弯曲成像盒子模型一样工作？如果这是您想要的，请使用盒子模型！
标签： html css flexbox bootstrap-4