css - Bootstrap 4 Card-Deck，里面有按钮，调整大小

Question

我发现了一个带有 bootstrap 4 的卡片组(3 张卡片)的问题。一切看起来都很棒，但是当您尝试使用手机横向模式时，每张卡片中的按钮/链接都没有调整大小。

当然，链接标题不是最短的，但应该可以。

FIDDLE

<div class="container">
  <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="pills-news-tab" data-toggle="pill" href="#pills-news" role="tab" aria-controls="pills-news" aria-selected="true">News</a>
    </li>
  </ul>
  <div class="tab-content" id="pills-tabContent">
    <div class="tab-pane fade show active" id="pills-news" role="tabpanel" aria-labelledby="pills-news-tab">

      <div class="row">
        <div class="col-sm-4">
          <div class="card" style="height: 100%;">
          <img class="card-img-top" src="/bw/img/bm.jpg" alt="Medizinischer Bademeister">            
            <div class="card-body">
              <h5 class="card-title">Wijhg ilgu or!</h5>
              <p class="card-text">Der Beruf des Masseurs/ med. Bademeisters is004 wird jährlich mindestens eine Klasse mit Berufsbewerbern eröffnet.</p>                  
              <a href="#" class="btn btn-primary">Mehr erfahren</a>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card" style="height: 100%;">
          <img class="card-img-top" src="/bw/img/pr.jpg" alt="Pharmareferent">                   
            <div class="card-body">
              <h5 class="card-title">Berufsbegleitende Weiterbildung "Pharmareferent"</h5>
              <p class="card-text">bH bietet ab März 2018 eine berufsbegleitende Weiterbildung zum "Geprüften Pharmareferuzk vuk".</p>
              <a href="#" class="btn btn-primary">Ausführliche Informationen</a>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card" style="height: 100%;">
          <img class="card-img-top" src="/bw/img/hfk.png" alt="Hygienefachkraft">                   
            <div class="card-body">
              <h5 class="card-title">Berufsbegleitende Weiterbildung "Hygienefachkraft"</h5>
              <p class="card-text">Am 31. August 2018 beginnt ein neuer Kurs "Fachkraft für Krankenhauserufe Erfurt.</p>
              <a href="#" class="btn btn-primary">Weiterführendes</a>
            </div>
          </div>
        </div> 
        <p><small class="text-muted">Letzte Aktualisierung: 18.01.2018</small></p>
      </div>

    </div>
 </div>

非常感谢!

Answer 1

如本 GitHub thread 中所述, Bootstrap btn 中的文本 不换行 这是设计使然。

有两种解决方法。添加 CSS 使 btn 文本换行...

.btn {
    white-space: normal;
}

或者，在按钮上使用 text-truncate 和 mw-100 以在卡片宽度变窄时显示“...”...

<a href="#" class="btn btn-primary mw-100 text-truncate">Mehr erfahren</a>

https://www.codeply.com/go/IdLNh5uUfA