wake-up-neo.com

Bootstrap 4-Kartendeck mit Spaltenanzahl nach Ansichtsfenster

Ich versuche die Card-Deck-Funktion in Bootstrap 4 zu implementieren, um alle meine Karten auf die gleiche Höhe zu bringen.

Die Beispiele, die Bootstrap zur Verfügung stellt, zeigen 4 Nice-Karten, es sind jedoch 4 Karten in der Reihe, unabhängig vom Ansichtsfenster. Siehe das Codeply hier .

Das macht für mich keinen Sinn, denn ich würde davon ausgehen, dass Sie eine Mindestgröße benötigen, auf die Ihre Karte verkleinert werden soll, damit Ihr Inhalt immer noch gut aussieht.

Ich habe dann versucht, einige Viewport-Klassen hinzuzufügen, um die Bildschirmgröße zu unterbrechen, aber sobald das Div hinzugefügt wird, gilt das Karten-Deck nicht mehr, sodass die Karten nicht gleich groß werden.

Wie kann ich das erreichen? Ist dies eine fehlende Funktion, die in der vollständigen Version von Bootstrap 4 behandelt wird?

Hier ist die Geige: https://jsfiddle.net/crrm5q9m/

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
        <div class="card card-inverse card-success text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>It's really good news that the new Bootstrap 4 now has support for CSS 3 flexbox.</p>
          <footer>Makes flexible layouts <cite title="Source Title">Faster</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-danger text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>The Bootstrap 3.x element that was called "Panel" before, is now called a "Card".</p>
          <footer>All of this makes more <cite title="Source Title">Sense</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-warning text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>There are also some interesting new text classes for uppercase and capitalize.</p>
          <footer>These handy utilities make it <cite title="Source Title">Easy</cite></footer>
        </blockquote>
      </div>
    </div>
    <div class="card card-inverse card-info text-center col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
      <div class="card-block">
        <blockquote class="card-blockquote">
          <p>If you want to use cool icons in Bootstrap 4, you'll have to find your own such as Font Awesome or Ionicons.</p>
          <footer>The Glyphicons are not <cite title="Source Title">Included</cite></footer>
        </blockquote>
      </div>
    </div>
  </div>
</div>
30
ganders

Aktualisiert 2018

Wenn Sie ein responsive-Kartendeck wünschen, verwenden Sie die Sichtbarkeits-Utils, um alle X-Spalten auf eine andere Breite des Ansichtsfensters (Haltepunkte) zu umbrechen.

Bootstrap 4 reagiert card-deck (v 4.1)


Ursprüngliche Antwort für Bootstrap 4 alpha 2:

Sie können verwenden, um das Raster col-*-* zu verwenden, um die verschiedenen Breiten (anstelle des Kartenstapels) zu erhalten, und dann mithilfe der Flexbox die gleiche Höhe für die Spalten einstellen.

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

http://codeply.com/go/O0KdSG2YX2 (alpha 2)

Das Problem ist, dass ohne Flexbox card-decktable-cell verwendet wird, wobei es sehr schwierig wird, die Breite zu steuern. Ab Bootstrap 4 Alpha 6 ist Flexbox die Standardeinstellung. Daher wird für Flexbox kein zusätzliches CSS benötigt. Die Klasse h-100 kann verwendet werden, um die Karten auf volle Höhe zu bringen.: http://www.codeply.com/ go/gnOzxd4Spk


Zugehörige Frage:Bootstrap 4 - Responsive Karten in Kartenspalten

36
Zim

Hier ist eine Lösung mit Sass, um die Anzahl der Karten pro Zeile in Abhängigkeit von Haltepunkten zu konfigurieren: https://codepen.io/migli/pen/OQVRMw

Es funktioniert gut mit Bootstrap 4 Beta 3

// Bootstrap 4 breakpoints & Gutter
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-Gutter-width: 30px !default;

// number of cards per line for each breakpoint
$cards-per-line: (
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5
);

@each $name, $breakpoint in $grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-Gutter-width});
        }
    }
}
20
migli

Ich habe dies funktioniert durch Hinzufügen eines min-width zu den Karten:

<div class="card mb-3" style="min-width: 18rem;">
  <p>Card content</p>
</div>

Die Karten fallen nicht unter diese Breite, füllen aber trotzdem jede Reihe richtig aus und sind gleich hoch.

5
Spanomaly
<div class="w-100 d-lg-none mt-4"></div>

Ich habe 4 Karten erstellt und diesen Code zwischen der zweiten und der dritten Karte platziert. Versuchen Sie dies.

3

Es gibt eine einfachere Lösung für - Feste Höhe von Kartenelementen - Kopf und Körper. Auf diese Weise können wir mit einem standardmäßigen Boostrap-Säulenraster ein resposives Layout festlegen. 

Hier ist mein Beispiel: http://codeply.com/go/RHDawRSBol

 <div class="card-deck text-center">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card mb-4">
            <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
            <div class="card-body" style="height: 20rem">
                <h4 class="card-title">1 Card title</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>
                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
            </div>
        </div>
1
Bart Gluszak

Diese Antwort ist für diejenigen, die Bootstrap 4.1+ verwenden und für diejenigen, die IE 11 ebenfalls interessieren

Das Kartendeck passt die Anzahl der sichtbaren Karten nicht an die Größe des Ansichtsfensters an.

Die oben genannten Methoden funktionieren, unterstützen jedoch nicht den IE. Mit der folgenden Methode können Sie ähnliche Funktionen und reaktionsschnelle Karten erzielen.

Sie können die Anzahl der Karten verwalten, die an verschiedenen Haltepunkten ein- und ausgeblendet werden sollen.

In Bootstrap 4.1+ Spalten haben standardmäßig die gleiche Höhe, stellen Sie jedoch sicher, dass Ihre Karte/Ihr Inhalt den gesamten verfügbaren Speicherplatz nutzt. Führen Sie das Snippet aus, Sie werden verstehen

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">

                <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 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>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <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 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>
        <div class="col-sm-6 col-lg-4 mb-3">
            <div class="card mb-3 h-100">
                <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 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>
    </div>
</div>
0
Ramesh Navi

Ich habe CSS Grid verwendet, um das zu beheben. CSS Grid wird alle Elemente in der gleichen Zeile auf die gleiche Höhe bringen.

Ich habe nicht versucht, alle Elemente in allen Zeilen auf die gleiche Höhe zu bringen.

Wie auch immer, hier ist, wie es gemacht werden kann:

HTML:

<div class="grid-container">

  <div class="card">...</div>
  <div class="card">...</div>
</div>

CSS:

.grid-container {
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

Hier ist eine vollständige JSFiddle. https://jsfiddle.net/bluegrounds/owjvhstq/4/

0
bluegrounds