Wie kann man Bootstrap-Karten in Kartenspalten auf die gleiche Höhe bringen?
Lesezeit: 11 Minuten
blueSurfer
Ich verwende Bootstrap 4 Alpha 2 und nutze die Vorteile von Karten. Konkret arbeite ich mit dieses Beispiel entnommen aus den offiziellen Dokumenten. Wie kann ich dafür sorgen, dass alle Karten die gleiche Höhe haben?
Alles, was mir jetzt einfällt, ist das Festlegen der folgenden CSS-Regel:
.card {
min-height: 200px;
}
Aber das ist nur eine fest codierte Lösung, die im Allgemeinen nicht funktioniert. Der Code ist meiner Meinung nach derselbe wie der in den Dokumenten, d. h.:
<div class="card-columns">
<div class="card">
<img class="card-img-top" data-src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title that wraps to a new line</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card card-block">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" data-src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card card-block card-inverse card-primary text-xs-center">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer>
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-block text-xs-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<div class="card">
<img class="card-img" data-src="https://stackoverflow.com/questions/35868756/..." alt="Card image">
</div>
<div class="card card-block text-xs-right">
<blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
Gibt es bisher irgendwelche Bemühungen? Irgendein Code zum Teilen?
– Baao
8. März 2016 um 13:36 Uhr
Dieses Beispiel bezieht sich auf gemauerte Säulen. Der springende Punkt bei diesem Stil ist, dass die Karten von hoher Qualität sind anders Höhen. Benutze einen Deck und aktivieren Sie den Flexbox-Modus, wenn Sie gleiche Höhen wünschen.
– QUentin
8. März 2016 um 13:47 Uhr
Das Deck funktioniert nur für Karten in einer Reihe. Was ich will, ist der gleiche Effekt card-columns aber die gleiche Höhe beibehalten.
h-100 ist keine feste Höhe, sondern eine Höhe von 100 % (der Zeile).
– Konyak
18. Okt. 2019 um 18:57 Uhr
@konyak ja, das ist mir klar, Kumpel. Ich beziehe mich nicht auf h-100 (scrollen Sie auf dieser Seite nach unten).
– Kerry7777
5. Mai 2020 um 5:32
@Kerry7777 Danke für die dringend benötigte Klarstellung, BUDDY! Außerdem war es in meinem Fall wichtig, den Divs den d-flex align-items-stretch hinzuzufügen, um meine Karten beizubehalten, aber ich musste auch hinzufügen h-100 sowohl auf der Karte als auch in den Kartenfußzeilen, um sicherzustellen, dass sie alle übereinstimmen
– Kyle Burkett
11. August 2020 um 17:30 Uhr
Die technisch korrekte Lösung ist die Verwendung eines Bootstrap-Kartendecks. Diese Lösung funktioniert jedoch zu 100 %.
– Leander
1. Dezember 2021 um 10:17 Uhr
Ich verwende Bootstrap 4 (Beta 2). Mittlerweile scheint sich die Situation geändert zu haben. Ich hatte das gleiche Problem und habe eine einfache Lösung gefunden. Das ist mein Code:
<div class="container-fluid content-row">
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="card h-100">
… content card …
</div>
</div>
… all the other cards …
</div>
</div>
Mit „col-sm-12 col-lg-6“ habe ich die Karten responsive gemacht. Bei „Karte h-100“ habe ich alle Karten auf die Höhe ihrer übergeordneten Spalte eingestellt. Auf meinem System funktioniert das, aber ich bin kein Profi. Hoffentlich habe ich jemandem geholfen.
so einfach h-100
– PNC
8. November 2017 um 19:38 Uhr
.h-100 – brillant
– JCraine
18. Februar 2018 um 0:46
Das hat bei mir geholfen d-flex verursachte Probleme mit dem IE (den ich unterstützen muss). Ich habe gerade eine hinzugefügt mb-4 zum übergeordneten Div, um die Karten etwas mehr zu trennen.
– Charles Paske
31. Mai 2018 um 22:53
und Sie können auch .pre-scrollable verwenden, um einen vertikalen Bildlauf durchzuführen
– Muhammad Waqas Aziz
16. Juli 2018 um 12:25
Ich würde allen Divs die Klasse .py-2 mit der Klasse .col-* hinzufügen, um einen Abstand zwischen den Zeilen hinzuzufügen.
– Konyak
18. Okt. 2019 um 18:55 Uhr
djibe
Bootstrap 4 hat alles, was Sie brauchen: VERWENDEN SIE THE .d-flex Und .flex-fill Klasse. Benutzen Sie das nicht card-decks da sie nicht reagieren. ich benutzte col-smdu kannst den … benutzen .col Klasse, die Sie wollen oder verwenden col-lg-x Das x bedeutet die Anzahl der Spaltenbreiten, z. B. 4 oder 3 für die beste Ansicht, wenn der Beitrag mehr als 3 oder 4 pro Spalte enthält
Versuchen Sie, das Browserfenster auf XS zu verkleinern, um es in Aktion zu sehen:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
<div class="row my-4">
<div class="col">
<div class="jumbotron">
<h1>Bootstrap 4 Cards all same height demo</h1>
<p class="lead">by djibe.</p>
<span class="text-muted">(thx to BS4)</span>
<p>Dependencies : standard BS4</p>
<p>
Enjoy the magic of flexboxes and leave the useless card-decks.
</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
A small card content.
</div>
</div>
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>
<div class="col-sm d-flex">
<div class="card card-body flex-fill">
Another small card content.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Diese Antwort funktioniert großartig! Wenn Sie „Card-Column“ oder „Card-Deck“ nicht verwenden können, um das gewünschte Reaktionsverhalten in allen Ansichtsfenstern zu erhalten.
– Holen Sie sich etwas Pfirsiche
27. Juni 2018 um 2:20
Das hat bei mir funktioniert. Ich habe eine Spalte mit einer großen Karte und rechts eine weitere Spalte mit zwei Zeilen. Die linke Karte nimmt also die Höhe der beiden angrenzenden Reihen ein, danke!
– Erich García
19. Februar 2019 um 15:08
Das war der richtige Weg. Ich habe es versucht card-columns aber es durften nicht mehr als 3 Spalten pro Zeile sein. Danke für diese Antwort
– Yeku Wilfred Chetat
28. Juni 2020 um 15:19 Uhr
Das Kartendeck hat in meinem Fall nicht funktioniert, Ihre Antwort hat den Zweck erfüllt!
– TBG
22. Juli 2020 um 16:18 Uhr
Tolle Antwort, und wenn jemand BS 5 verwendet, überprüfen Sie die Migrationsseite So viel hat sich geändert (einschließlich der Art und Weise, wie die Karten ausgelegt sind) – auf Wiedersehen, ihr Lieben jumbotron…
– Nicorellius
30. Januar 2021 um 0:38
Sie können die Klasse anwenden h-100was für Höhe 100 % steht.
Die Bootstrap 4 Alpha card-columns verwendet CSS3-Spalten, die eigentlich keine gleichen Höhen unterstützen (außer Column-Fill, das nur in Firefox unterstützt wird).
Wenn Sie stattdessen den Bootstrap 4-Flexbox-Modus aktivieren, können Sie stattdessen den verwenden card-deck und ein wenig CSS, um die Höhe auszugleichen und alle 3 Spalten umzubrechen.
Sie können das Kartendeck verwenden, es richtet alle Karten aus … dies stammt von der offiziellen Seite von Bootstrap 4.
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://stackoverflow.com/questions/35868756/..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Gibt es bisher irgendwelche Bemühungen? Irgendein Code zum Teilen?
– Baao
8. März 2016 um 13:36 Uhr
Dieses Beispiel bezieht sich auf gemauerte Säulen. Der springende Punkt bei diesem Stil ist, dass die Karten von hoher Qualität sind anders Höhen. Benutze einen Deck und aktivieren Sie den Flexbox-Modus, wenn Sie gleiche Höhen wünschen.
– QUentin
8. März 2016 um 13:47 Uhr
Das Deck funktioniert nur für Karten in einer Reihe. Was ich will, ist der gleiche Effekt
card-columnsaber die gleiche Höhe beibehalten.– blueSurfer
8. März 2016 um 13:52