Bootstrap 4 Card-Deck с кнопками внутри, изменение размера - PullRequest
Новая
       48

Bootstrap 4 Card-Deck с кнопками внутри, изменение размера

0 голосов
/ 12 июня 2018

Я обнаружил проблему с колодой карт (3 карты) с начальной загрузкой 4. Все выглядит отлично, но когда вы переключаете ландшафтный режим с помощью мобильного телефона, кнопки / ссылки внутри каждой карты не меняются.

Конечно, заголовки ссылок не самые короткие, но они должны работать.

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 голосов
/ 12 июня 2018

Как объяснено в этом потоке GitHub , текст в 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

0 голосов
/ 12 июня 2018

Так что, используя ваш html, но с ссылками BS 4, он, кажется, работает нормально, кажется, что все изменяется в соответствии с ожиданиями.

Запуск этого фрагмента в полноэкранном режиме и использование инструментов разработки браузера Chrome в адаптивном режиме при изменении размера колоды, все изменяется соответствующим образом

Несмотря на то, что это кажется проблемой с пробелами кнопок, я могуувидеть, что кнопка 3-й колонки все еще превышает карту.Возможно, стоит рассмотреть возможность выбора размера шрифта в области просмотра. 

.btn {
  white-space:normal !important;
  font-size:1vw !important;
}
<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>
...