Wie kann man Bootstrap 4-Karten in Spalten auf die gleiche Höhe bringen?

Bootstrap 4: Karten gleicher Höhe in Spalten

Problem:

Bei Verwendung von Bootstrap 4 variieren die Karten innerhalb der Spalten in der Höhe basierend auf der Länge des Titeltextes. Wie können Sie Karten mit gleicher Höhe erreichen, auch wenn die Höhe ihres Inhalts unterschiedlich ist?

Antwort:

Entgegen der Besorgnis verwenden Bootstrap 4-Spalten bereits Flexbox. Dadurch wird sichergestellt, dass sie von Natur aus die gleiche Höhe haben. Damit die Karten die gesamte Höhe ihrer jeweiligen Spalten einnehmen, fügen Sie den Karten einfach die Klasse h-100 hinzu, wie im folgenden Codeausschnitt dargestellt:

<code class="html"><div class="col-md-4 col-sm-6 col-12">
  <div class="card h-100">
    ...
  </div>
</div></code>

Zusätzliche Überlegungen:

• Vermeiden Sie das Floating der Karten, da dies unnötig ist.
• Entfernen Sie die .card-deck-Klasse aus der .row; .col-* sollte direkte Kinder von .row sein.

Demonstration:

Besuchen Sie https://codeply.com/go/hKhPuxoovH für ein Live-Erlebnis Demonstration der Lösung.

Das obige ist der detaillierte Inhalt vonWie kann man Bootstrap 4-Karten in Spalten auf die gleiche Höhe bringen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!