代码之家 › 专栏 › 技术社区 › koseduhemak

引导4-卡组与卡体等高度相同[副本]

bootstrap-4 flexbox css html

-1

koseduhemak · 技术社区 · 6 年前

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) )打破了整洁的布局。

下图显示了我的问题: