Bootstrap - Richten Sie die Schaltfläche an der Unterseite der Karte aus

Question 1

Ich habe mir eines der Bootstrap-Beispiele angesehen, die die Klassen card-deckund cardverwenden ( Preisbeispiel ). Ich habe mich gefragt, wie man die Tastenausrichtung korrigieren kann, wenn eine der Listen weniger Elemente enthält als die anderen.

Ich möchte, dass alle Schaltflächen vertikal ausgerichtet sind (am unteren Rand jeder Karte), aber ich konnte keinen Weg finden, dies zu tun. Ich habe versucht, die .align-bottomKlasse festzulegen und die Schaltfläche einzuschließen <div class="align-text-bottom">. Ich habe auch einige Vorschläge aus dieser Frage zum Hinzufügen von Speicherplatz ausprobiert, jedoch immer noch keinen Erfolg (auch der Abstand sollte variabel sein, damit der verbleibende Speicherplatz aus der Liste ausgefüllt wird).

Das Einwickeln <div class="card-footer bg-white">führte auch nicht zum gewünschten Ergebnis, da die Schaltfläche am unteren Rand der Karte nicht ausgerichtet ist und eine Art Rand um sie herum entsteht.

Hat jemand eine Idee?

Bearbeiten: Hier ist eine jsfiddle , die dem Problem ähnelt.

Question 2

Sie können die folgenden Bootstrap 4-Modifikatorklassen verwenden:

Hinzufügen d-flexzu.card-body
Hinzufügen flex-columnzu.card-body
Hinzufügen mt-autozu .btnverschachtelt in.card-body

Geige

Siehe diese Seite eine vollständige Liste der Flexbox-Änderungsklassen für Bootstrap 4.

Question 3

Eine ähnliche Frage wurde hier beantwortet .

Fügen Sie einfach die align-self-endKlasse zum Element hinzu, um sie unten auszurichten.

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>

Standardmäßig ist das cardDisplay: flex, das card-bodynicht. Aus diesem Grund müssen Sie hinzufügen , d-flex flex-columnum diecard-body . Dadurch funktionieren die Flexbox-Ausrichtungsklassen.

Eine andere Option ist die Verwendung mt-auto(automatischer oberer Rand) der Taste, mit der sie an den unteren Rand der Karte gedrückt wird.

Question 4

Stellen Sie das .card-bodydiv auf display:flexund ein flex-direction:column.

Dann geben Sie den Knopf margin-top:auto.

Ich stelle mir vor, dass es dafür Bootstrap-Hilfeklassen gibt.

.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>

Erweitern Sie das Snippet

Question 5

Sie müssen hinzufügen:

<div class="card-footer">
<button type="button" class="btn btn-primary btn-sm btn-block" onclick="location.href = '';">BUY NOW </button>
</div>

Question 6

Verwenden Sie die Fußzeile, sie hat bereits alles für Sie eingerichtet.

<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>

Anschließend können Sie optional das Kartenfußelement gestalten.

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

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

Question 7

Flex ist dein Freund

So etwas wird die Magie wirken:

.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>

Erweitern Sie das Snippet