Wie erstelle ich Karten gleicher Höhe in Bootstrap 4-Spalten?

Bootstrap 4 Karten gleicher Höhe innerhalb von Spalten

Problem

Viele Entwickler, die Bootstrap 4 verwenden, stoßen auf ein häufiges Problem: Karten in Spalten variieren oft in der Höhe , hauptsächlich aufgrund von Unterschieden im Inhalt oder in der Überschriftengröße. Dies kann zu einem ungleichmäßigen und optisch unansehnlichen Layout führen.

Lösung

Um Karten gleicher Höhe innerhalb von Bootstrap 4-Spalten zu erreichen, nutzen Sie die Klasse h-100, um die Höhe festzulegen der Karten auf 100 % der enthaltenden Spalte. Dadurch wird sichergestellt, dass die Karten die volle Höhe des verfügbaren Platzes einnehmen.

Implementierung

HTML-Markup:

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

Hinweis:

• Die Klassen .col-* sollten direkt auf das Div .card angewendet werden, nicht auf ein Zwischenelement wie . Kartendeck.
• Die Verwendung von float auf den Karten ist nicht erforderlich.
• Die Klasse h-100 kann auf alle Karten angewendet werden innerhalb einer Spalte oder selektiv auf bestimmte Karten für gezielte Höhenanpassungen.

Beispielcode (Codeply):

https://codeply.com/go/ hKhPuxoovH

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