Wie mache ich Bootstrap 4-Karten in Kartenspalten gleich hoch?

Ich benutze Bootstrap 4 Alpha 2 und nutze die Vorteile von Karten. Insbesondere arbeite ich mit diesem Beispiel aus den offiziellen Dokumenten. Wie kann ich alle Karten auf die gleiche Höhe bringen?

Jetzt kann ich nur noch die folgende CSS-Regel festlegen:

.card {
    min-height: 200px;
}

Dies ist jedoch nur eine fest codierte Lösung, die im Allgemeinen nicht funktioniert. Der Code in meiner Ansicht ist der gleiche wie der in den Dokumenten, dh:

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" data-src="..." 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="..." 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="..." 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>

Sie können die Klassen entweder in die "Zeile" oder die "Spalte" setzen? Wird auf den Karten (Rand) nicht sichtbar sein, wenn Sie es in der Reihe verwenden. https://v4-alpha.getbootstrap.com/utilities/flexbox/#align-items

<div class="container">
    <div class="row">
          <div class="col-lg-4 d-flex align-items-stretch">

Einige der anderen Antworten hier scheinen "verrückt" zu sein. Warum sollte eine Mindesthöhe oder noch schlimmer eine feste Höhe verwendet werden?

Ich dachte, dieses Problem (gleiche Höhen) sei Teil des Grundes für die Abkehr von schwebenden Block-Divs?

Ich benutze Bootstrap 4 (Beta 2). Inzwischen scheinen sich die Situationen geändert zu haben. Ich hatte das gleiche Problem und fand eine einfache Lösung. 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 reaktionsschnell gemacht. Mit "Karte h-100" habe ich alle Karten auf die Höhe ihrer übergeordneten Spalte gesetzt. Auf meinem System funktioniert das, aber ich bin kein Profi. Hoffentlich habe ich jemandem geholfen.

Die beste Lösung, Bootstrap 4, bietet alles, was Sie brauchen: USE THE .d-flexund .flex-fillclass. Verwenden Sie das nicht, card-decksda sie nicht reagieren. Ich habe verwendet col-sm, Sie können die .colgewünschte Klasse verwenden oder verwendencol-lg-x die x bedeutet Anzahl der Breitenspalten, z. B. 4 oder 3, für die beste Ansicht, wenn der Beitrag viele als 3 oder 4 pro Spalte hat

Hier ist das Biest. Versuchen Sie, das Browserfenster auf XS zu reduzieren, 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>

Sie können die Klasse anwenden h-100, die für Höhe 100% steht.

UPDATE: In Bootstrap 4 ist Flexbox jetzt die Standardeinstellung und jede card-deckZeile enthält 3 Karten. Die Karten werden bis zur vollen Höhe gefüllt.

http://www.codeply.com/go/x91w5Cl6ip

Der Bootstrap 4 alpha card-columnsverwendet CSS3-Spalten, die nicht wirklich gleiche Höhen unterstützen (mit Ausnahme der Spaltenfüllung, die nur in Firefox unterstützt wird).

Wenn Sie stattdessen den Bootstrap 4-Flexbox-Modus aktivieren, können Sie stattdessen das card-deckund ein wenig CSS verwenden, um die Höhe auszugleichen und alle 3 Spalten zu umbrechen .

@media (min-width:34em) {
    .card-deck > .card
    {
        width: 29%;
        flex-wrap: wrap;
        flex: initial; 
    }
}

http://codeply.com/go/YFFFWHVoRB

Verwandte
Bootstrap-Karte gleicher Höhe in Spalte

So habe ich es gemacht:

CSS:

.my-flex-card > div > div.card {
    height: calc(100% - 15px);
    margin-bottom: 15px;
}

HTML:

<div class="row my-flex-card">
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                aaaa
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                bbbb
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                cccc
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card">
            <div class="card-block">
                dddd
            </div>
        </div>
    </div>
</div>

Wickeln Sie die Karten ein

<div class="card-group"></div>

oder

<div class="card-deck"></div>

Ich habe einen etwas anderen Ansatz gewählt. Verwenden des Kartendeck-Wrappers

Ich habe eine Stilregel hinzugefügt, die die Höhe des Kartenblocks begrenzt:

.card .card-block {max-height:300px;overflow:auto;}

Dies ergibt folgendes Ergebnis:

Sie können das Kartenspiel verwenden, es werden alle Karten ausgerichtet ... diese stammen von der offiziellen Bootstrap 4-Seite.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src="..." 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="..." 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="..." 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>

Ein weiterer nützlicher Ansatz ist Card Grids :

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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.</p>
      </div>
    </div>
  </div>
  <div class="col mb-4">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <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>
      </div>
    </div>
  </div>
</div>

Der minimalste Weg, dies zu erreichen (den ich kenne) :

• Auf .text-monospacealle Texte auf der Karte anwenden .
• Begrenzen Sie alle Texte auf den Karten auf die gleiche Anzahl von Zeichen.

AKTUALISIEREN

Fügen Sie .text-truncateden Titel der Karte und andere Texte hinzu. Dies zwingt Texte in eine einzelne Zeile. Die Karten haben die gleiche Höhe.

Ich bin ein Anfänger in diesem Bereich, bitte verzeihen Sie, wenn mir insgesamt etwas fehlt.

Ich habe viele der oben genannten ausprobiert. Wenn Sie die Höhe auf 100% setzen, wird die Karte immer auf die größte Länge der längsten Karte erweitert. Der Container wird alle auf die gleiche Länge beschränken.

Ich wollte den Container sehen, also benutzte ich Hintergrundfarbe, um zu sehen, was los war.

<div class="col-lg-3"  style="background-color: rosybrown;">
    <div class="card w-100" Style="height: 100%">
        <div class="card-body">
            <img src="images/beHappy.png" alt="" class="img-fluid rounded-circle w-25 mb-3">
            <h4>CBe Happy</h2>

das hat bei mir gut funktioniert:

<div class="card card-body " style="height:80% !important">

Erzwingen unseres CSS über das Bootstraps Allgemeines CSS.

Ich bin auf dieses Problem gestoßen, die meisten Leute verwenden jQuery ... Hier war meine Lösung. "Macht nichts, ich bin nur ein Anfänger in diesem ..."

.cards-collection {
    .card-item { 
        width: 100%;
        margin: 20px 20px;
        padding:0 ;
        .card {
            border-radius: 10px;
                button {
                    border: inherit;
                }
        }
    }
}

     .container-fluid
         .row.cards-collection.justify-content-center
           .card-item.col-lg-3.col-md-4.col-sm-6.col-11
              .card.h-100

Wenn eine Kartenelementhöhe z. B. 400 Pixel (basierend auf dem Inhalt) beträgt, weil die Standardeinstellung für Flex-Align Stretch ist, wird .card-Element (untergeordnetes Element der Zeilen- oder Kartensammelklasse) gestreckt. Wenn die Höhe der Karte 100% des Elternteils beträgt, wird diese volle Höhe belegt.

Ich hoffe ich hatte recht. Bin ich

Wenn jemand interessiert ist, gibt es ein jquery-Plugin namens: jquery.matchHeight.js

https://github.com/liabru/jquery-match-height

Mit matchHeight ist die Höhe aller ausgewählten Elemente genau gleich. Es behandelt viele Edge-Fälle, bei denen ähnliche Plugins fehlschlagen.

Für eine Reihe von Karten verwende ich:

<div class="row match-height">

Aktivieren Sie dann die gesamte Site:

$('.row.match-height').each(function() {
   $(this).find('.card').not('.card .card').matchHeight(); // Not .card .card prevents collapsible cards from taking height
});

jsfiddle

Fügen Sie einfach die gewünschte Höhe mit CSS hinzu, Beispiel:

.card{
    height: 350px;
}

Sie müssen Ihr eigenes CSS hinzufügen.

Wenn Sie die Dokumentation überprüfen, ist dies für den Mauerwerksstil - der Punkt ist, dass sie nicht alle gleich hoch sind.