Wie erreicht man in einem Bootstrap-4-Kartendeck mit responsiver Spaltenanzahl die gleiche Kartenhöhe?

Bootstrap 4-Kartendeck mit Responsive Column Count

Szenario:

Implementierung der Kartendeckfunktion von Bootstrap 4, um sicherzustellen Gleiche Kartenhöhe in verschiedenen Ansichtsfenstergrößen.

Problem:

Standardmäßig zeigt das Kartendeck unabhängig von der Ansichtsfenstergröße vier Karten in einer Reihe an, was zu einer unerwünschten Größenänderung des Inhalts führt auf kleineren Bildschirmen.

Lösung 1: Rasterspalten (Bootstrap 4 Alpha 2)

Vor der Flexbox-Unterstützung von Bootstrap 4 bestand eine Problemumgehung darin,

Elemente mit geeigneten Rasterspaltenklassen (z. B. col-*), um die Kartenbreite zu steuern. Dann wurde Flexbox angewendet, um eine gleiche Höhe zu erzwingen:

<code class="css">.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}</code>

Lösung 2: h-100-Klasse (Bootstrap 4 Alpha 6 und höher)

Flexbox wird standardmäßig in Mit Bootstrap 4 Alpha 6 entstand eine noch einfachere Lösung:

<code class="css">.h-100 {
  height: 100%;
}</code>

Wenden Sie die h-100-Klasse auf Kartenelemente an, um deren Höhe automatisch auf 100 % zu setzen, sodass sie die gleiche Höhe haben:

<code class="html"><div class="card h-100">
  ...
</div></code>

Hinweis:

Für reaktionsfähigere Layouts sollten Sie die Verwendung von Breakpoint-Klassen wie d-*-col (z. B. d-md-col-6) in Betracht ziehen, um die Spaltenanzahl spezifisch anzugeben Bildschirmgrößen.

Das obige ist der detaillierte Inhalt vonWie erreicht man in einem Bootstrap-4-Kartendeck mit responsiver Spaltenanzahl die gleiche Kartenhöhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

bootstrap count for using class default viewport column issue

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn