Bootstrap - wyrównaj przycisk do dolnej części karty

86

Zerknąłem na jeden z przykładów Bootstrap, które używają klas card-decki card( przykład cenowy ). Zastanawiałem się, jak można naprawić wyrównanie przycisków, jeśli jedna z list ma mniej elementów niż inne.

Problem z wyrównaniem

Chciałbym, aby wszystkie przyciski były wyrównane w pionie (na dole każdej karty), ale nie mogłem wymyślić, jak to zrobić. Próbowałem ustawić .align-bottomklasę, a także zawinąć przycisk <div class="align-text-bottom">. Wypróbowałem również kilka sugestii z tego pytania dotyczących dodawania spacji, ale nadal bez powodzenia (również odstępy powinny być zmienne, aby wypełniały pozostałe miejsce z listy).

Zawijanie <div class="card-footer bg-white">również nie przyniosło pożądanego rezultatu, ponieważ nie wyrównuje przycisku u dołu karty i tworzy wokół niego pewnego rodzaju obramowanie.

Czy ktoś ma pomysł?

Edycja: Oto plik jsfiddle, który przypomina problem.

html css twitter-bootstrap bootstrap-4 gość
źródło
2
Zawsze możesz ustawić go tak absolute, bottom:0, margin:0 auto, jak ich rodzic ustawił jakoposition: relative
Ferran Buireu
@Paulie_D Próbowałem ustawić, style="margin-top: auto;"ale to nie zmienia sytuacji. Przycisk znajduje się dokładnie tam, gdzie był wcześniej. Zobacz to skrzypce .
a_guest

Odpowiedzi:

169

Możesz użyć następujących klas modyfikatorów Bootstrap 4:

  1. Dodaj d-flexdo.card-body
  2. Dodaj flex-columndo.card-body
  3. Dodaj mt-autodo .btnzagnieżdżonego.card-body

skrzypce

Odnoszą się do tej strony , aby uzyskać pełną listę klas schematu flexbox modyfikujących dla Bootstrap 4.

sol
źródło
2
Musiałem ustawić "h-100" na 100% wysokości również na .card-body, ale może moja wina? Dzięki za miłą odpowiedź!
Rustyjim
21

Tutaj udzielono odpowiedzi na podobne pytanie .

Po prostu dodaj align-self-endklasę do elementu, aby wyrównać na dole.

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

     <div class="card-body d-flex flex-column">
            <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
            <ul class="list-unstyled mt-3 mb-4">
              <li>20 users included</li>
              <li>10 GB of storage</li>
            </ul>
            <button type="button" class="align-self-end btn btn-lg btn-block btn-primary" style="margin-top: auto;">Get started</button>
     </div>

Domyślnie cardjest display: flex, ale card-bodynie jest. Z tego powodu musisz dodać d-flex flex-columndo card-body. To sprawi, że klasy wyrównania flexbox będą działać.

Inną opcją jest użycie mt-auto(automatyczny górny margines) na przycisku, który przesunie go na dół Karty.

Zim
źródło
wygląda na to, że w 4.4.1 karta nie jest elastyczna, musiałem dodać .d-flex do .card, aby to działało
Pablo Pazos
6

Ustaw .card-bodydiv na display:flexi flex-direction:column.

Następnie daj przycisk margin-top:auto.

Wyobrażam sobie, że istnieją w tym celu klasy pomocy Bootstrap.

.card-body {
  display: flex;
  flex-direction: column;
}

button.btn {
  margin-top: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Free</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
          <li>10 users included</li>
          <li>2 GB of storage</li>
          <li>Email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
      </div>
    </div>

    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Enterprise</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>30 users included</li>
          <li>15 GB of storage</li>
          <li>Phone and email support</li>
          <li>Help center access</li>
        </ul>
        <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
      </div>
    </div>
  </div>
Rozwiń fragment

Paulie_D
źródło
3

Musisz dodać:

<div class="card-footer">
<button type="button" class="btn btn-primary btn-sm btn-block" onclick="location.href = '';">BUY NOW </button>
</div>
Peter Palmer
źródło
2

Użyj stopki, ma już wszystko ustawione dla Ciebie.

<div class="card-deck">
<div class="card">
   <div class="card-body">
      <h4 class="card-title">Title goes here</h4>
      <p class="card-text">Ut leo enim, fermentum fermentum tempor sit amet, vehicula in felis. Pellentesque a arcu augue. Nam eu malesuada lorem. Curabitur et molestie lacus.</p>
   </div>
   <div class="card-footer text-muted mx-auto">
      <button type="button" class="btn btn-sm btn-outline-secondary">Click me!</button>
   </div>
</div>

Następnie możesz opcjonalnie stylizować element stopki karty.

.card-footer {
  background: transparent;
  border-top: 0px;
}

demo: https://jsfiddle.net/rustynox/203zwyq6/

RustyNox
źródło
1

Flex to Twój przyjaciel

Coś takiego zadziała magicznie:

.flex-wrap {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: inherit;
  -ms-flex-align: inherit;
  align-items: inherit;
}

.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #eee;
  border: 1px solid #ccc;
  margin: 10px;
  padding: 10px;
}


.flex-item {
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}


.fill{
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.btn{
  background:#069;
  padding:10px;
  color:#fff;
}
<div class="flex-wrap">

  <div class="flex-container">
    <div class="flex-item">FREE</div>
    <div class="flex-item fill">
      <h2>$0</h2>
      <p>Some text ... ashd iaush diuhasd uhasd aiusdh iaush d haisduhaiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">SIGN UP</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">PRO</div>
    <div class="flex-item fill">
      <h2>$10</h2>
      <p>Some text ... ashd iaush uhasd aiusdh iaush d haisduhdiuhasd aiusdh iuhasd aiusdh iaush d haisduhaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">GET STARTED</a>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">ENTERPRISE</div>
    <div class="flex-item fill">
      <h2>$20</h2>
      <p>Some text ... ashd iaush diuhasd aiusdh iaush d haisduh aisuhd ias u</p>
    </div>
    <div class="flex-item">
      <a href="#" class="btn">CONTACT</a>
    </div>
  </div>
  
</div>
Rozwiń fragment

DreamTeK
źródło