带有按钮的Bootstrap 4 Card-Deck，调整大小

时间：2018-06-12 16:47:50

标签： css twitter-bootstrap responsive-design bootstrap-4

我发现了带有引导程序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>

非常感谢你！

2 个答案:

答案 0 :(得分：1)

正如本GitHub thread中所述，Bootstrap btn 中的文字未包装，这是设计的。

有2种解决方法。添加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

答案 1 :(得分：0)

所以使用你的html但是使用BS 4链接似乎工作正常，一切似乎都按预期调整大小。

全屏运行此代码段并在响应模式下使用Chrome浏览器的开发工具调整大小时，所有内容都会相应调整

即使它看起来是按钮空白的问题，我可以看到第3列按钮仍然超过了卡。也许可以考虑使用视口字体大小调整。

＆＃13;
＆＃13; 
.btn {
  white-space:normal !important;
  font-size:1vw !important;
}
＆＃13; 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div class="container">
  <h1>Aktuelles</h1>

  <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>
    <li class="nav-item">
      <a class="nav-link" id="pills-events-tab" data-toggle="pill" href="#pills-events" role="tab" aria-controls="pills-events" aria-selected="false">Veranstaltungen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="pills-press-tab" data-toggle="pill" href="#pills-press" role="tab" aria-controls="pills-press" aria-selected="false">Presse</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="https://picsum.photos/200/100" 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="https://picsum.photos/200/100" 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="https://picsum.photos/200/100" 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 class="tab-pane fade" id="pills-events" role="tabpanel" aria-labelledby="pills-events-tab">

      <h3>Beginn der Ausbildungen</h3><br>

      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Datum</th>
            <th scope="col">Ausbildung</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">01.08.2018</th>
            <td><a href="">Phyrapie</a>,<br><a href="">Pharmah-technischer Assistent</a>,
              <br><a href="">Masseur und med. Bademeister</a>,<br><a href="">Med.-techn. Asssistent für den OP-Dienst</a>,<br><a href="">Sozialbetreuer</a></td>
          </tr>
          <tr>
            <th scope="row">01.09.2018</th>
            <td><a href="">Altenpflege</a> (auch verkürzt),<br><a href="">Altenpflegehilfe</a></td>
          </tr>
        </tbody>
      </table>
      <br>

      <h3>Beginn der Fort- und Weiterbildungen</h3><br>

      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Datum</th>
            <th scope="col">Weiterbildung</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">31.08.2018</th>
            <td><a href="">Berufsbegleitende Weiterbildung als<br> "Fachkraft für Krajh,bkjl.b kjgöl uigiu </a><br>ein späterer Einstieg ist möglich!</td>
          </tr>
          <tr>
            <th scope="row">09.2018</th>
            <td><a href="">Berufbegleitende Weiterbildung als "Pharmareferent"</a><br>jhlkhgljk</td>
          </tr>
        </tbody>
      </table>
      <br>

      <h3>Physiotherapeutische Weiterbildungen</h3><br>

      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Kurstermin</th>
            <th scope="col">Weiterbildung</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">06.08. - 31.08.2018</th>
            <td><a href="#">Manuelle Lymphdrainage</a></td>
          </tr>
          <tr>
            <th scope="row">10.09. - 16.09.2018</th>
            <td><a href="#">Wirbesäulenkurs für PT (W3)</a></td>
          </tr>
          <tr>
            <th scope="row">09.11. - 11.11.2018</th>
            <td><a href="#">Einführungskurs "Osteopathie" (E0) für <br>Physiotherapeuten</a></td>
          </tr>
          <tr>
            <th scope="row">12.11. - 18.11.2018</th>
            <td><a href="#">Extremitätenkurs für Ärzte und PT (E1+E2=Ä1)</a></td>
          </tr>
          <tr>
            <th scope="row">07.12. - 09.12.2018</th>
            <td><a href="#">Kurs Extremitäten / Wirbelsäule E4/W4</a></td>
          </tr>
        </tbody>
      </table>
      <br>

    </div>
    <div class="tab-pane fade" id="pills-press" role="tabpanel" aria-labelledby="pills-press-tab">

      <h3>Presseberichte</h3><br>

      <table class="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Zeitung/Datum</th>
            <th scope="col">Thema</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">Pressebericht "Deutscher Sportball" / 08.11.2014</th>
            <td><a href="#">Auf zwei Rädern</a><br>Juniorenweltmeisterin Doreen Heinze...</td>
          </tr>
          <tr>
            <th scope="row">AA Erfurt / 02.06.2013</th>
            <td><a href="#">Mit Herzblut</a><br>Die Entscheidung für eine Ausbildung...</td>
          </tr>
          <tr>
            <th scope="row">TLZ Erfurt / 28.10.2010</th>
            <td><a href="#">Projekttag im Bildungswerk für Gesundheitsberufe - Das Alter und kleine Kniffe</a></td>
          </tr>
          <tr>
            <th scope="row">AA Erfurt / 11.03.2009</th>
            <td><a href="#">Offene Türen - Bildungswerk für Gesundheitsberufe lädt am Samstag ein</a></td>
          </tr>
          <tr>
            <th scope="row">AA Erfurt / 05.07.2006</th>
            <td><a href="#">Neuer Beruf: Medizinsch-technischer Assistent für den OP-Dienst</a></td>
          </tr>
        </tbody>
      </table>
      <br>

    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题