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

81

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.

Ausrichtungsproblem

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.

html css twitter-bootstrap bootstrap-4 ein Gast
quelle
2
Sie können es jederzeit so positionieren absolute, bottom:0, margin:0 auto, dass die Eltern alsposition: relative
Ferran Buireu
@Paulie_D Ich habe versucht einzustellen, style="margin-top: auto;"aber das ändert nichts an der Situation. Der Knopf sitzt genau dort, wo er vorher war. Sehen Sie diese Geige .
a_guest

Antworten:

162

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

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

Geige

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

Sol
quelle
2
Ich musste "h-100" für 100% Höhe auch auf .card-body einstellen, um zu funktionieren, aber vielleicht meine Schuld? Danke für die nette Antwort!
Rustyjim
20

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.

Zim
quelle
es scheint, dass in 4.4.1 die Karte nicht flex ist, ich musste .d-flex zur .card hinzufügen, damit es funktioniert
Pablo Pazos
6

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

Paulie_D
quelle
3

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>
Peter Palmer
quelle
2

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/

RustyNox
quelle
0

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

DreamTeK
quelle