Bootstrap-4 Karten-deck table-cell Spalten responsive basierend auf der viewport?

So, in Bootstrap v4, ich sehe es gibt ein neues feature für die Karte-decks ( http://v4-alpha.getbootstrap.com/components/card/#decks ) , lässt sich eine Gruppe von Karten, die mit Ihrer Höhe gleich nach dem höchsten Inhalt in der Gruppe.

Es erscheint die Anzahl der Spalten, die basieren auf, wie viele Karte-div ' s sind in der Gruppe. Gibt es eine Möglichkeit, um die Anzahl der Spalten ändern sich je nach viewport? Zum Beispiel 4 Spalten /Karte-Breite zu großer Breite, 2 Breite in mittlerer Breite, und 1 in der kleinen Breite?

Derzeit bleiben Sie die gleiche Anzahl von Spalten/Karten weit bis weniger als 544px. Bei 544px und größer, Sie haben display: table-cell mit der screen (min-width: 544px) Regel.

Gibt es eine Möglichkeit, die Karten haben eine unterschiedliche Anzahl von Spalten basierend auf den viewport durch änderung der CSS?

Bearbeiten - Suchen, um nicht mit flex /flexbox wegen IE-Unterstützung

Codepen-Beispiel 4 col/Karte-Breite und 3 col/Karte-Breite an http://codepen.io/jpost-vlocity/full/PNEKKy/

InformationsquelleAutor jpostdesign | 2016-04-07

  1. 7

    Update 2018

    Es ist schwer, die Karten zu breiten (responsive) mit card-deck weil es nutzt display:table-cell und width:1%.

    Ich fand es einfacher zu machen, Sie reagieren mit den Karten in der Bootstap-grid col-* und dann können Sie die raster-Ansichtsfenster Haltepunkte. Aktivieren Bootstrap - flexbox-wenn Sie möchten, dass die Karten, die gleich Höhe wie der card-deck.

    http://www.codeply.com/go/6eqGPn3Qud

    Auch img-responsive verändert hat img-fluid

    Bootstrap 4.0.0

    Flexbox nun standardmäßig, aber es ist noch nicht ein unterstützt Weg, um ansprechende Karten-deck. Der empfohlene Weg ist, um Karten in der Startaufstellung:

    Responsive-Karten mit raster

    Anderer Weg, um eine ansprechende Karte-deck, ist mit responsive reset divs jeden x Spalten. Dies zwingt Karten zu wickeln, die an bestimmte Haltepunkte.

    Beispiel: 5 xl, 4-auf-lg, 3 md -, 2 sm, etc..

    Reaktionsschnelle Kartenspiel, demo (4.0.0)

    Reaktionsschnelle Kartenspiel, demo (alpha 6)

    CSS pseudo-Elementen variation

    Gibt es eine Möglichkeit, dies zu tun, ohne flex / flexbox? Für die IE-Unterstützung natürlich

    InformationsquelleAutor Zim

  2. 5

    Hier gehen Sie,
    http://codepen.io/KarlDoyle/pen/pypWbR

    Die Hauptsache ist, dass Sie das überschreiben der Stile. wie unten gezeigt.

    .card-deck {
  display: flex;
  justify-content: flex-start;
  flex-flow: row wrap; 
  align-items: stretch;
}
.card-deck .card {
  display: block;
  flex-basis: 33.3%; /* change this value for each breakpoint*/
}
    Gibt es eine Möglichkeit, dies zu tun, ohne flex / flexbox? Für die IE-Unterstützung natürlich
    könnten Sie ein polyfill github.com/10up/flexibility oder Sie können erstellen Sie Ihre eigene Komponente, die ist nicht abhängig von flex und mit Schwimmern statt. Überprüfen Sie auch diese fallback-Lösung, die eine Hilfe sein können css-tricks.com/forums/topic/flexbox-with-fallback
    Nur ein Punkt aber, Bootstrap & Flexbox - in Bezug auf die Unterstützung für IE v4-alpha.getbootstrap.com/getting-started/flexbox

    InformationsquelleAutor Karl Doyle

  3. 5

    Fand ich eine ziemlich einfache Problemumgehung mithilfe von css-grid. Sie könnte zwicken die 250px passend zu Ihrem Anwendungsfall.

    .card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}
    Diese verwendet, um anzuzeigen, eine unbegrenzte Anzahl von Karten richtig, funktioniert viel besser als reactstrap CardDesk zum Beispiel. Genial. 🙂
    Für meine Fall nutze ich auto-fill-statt auto-fit als die Anzahl der Karten variiert von 1 bis 100 und wenn das Karte-zählen ist unter 5, Abstand zwischen den Karten zu bekommen erhöhen, um zu passen innerhalb des übergeordneten div.
    Sehr elegante Vorgehensweise

    InformationsquelleAutor esitarz

  4. 1

    Bootstrap-4 Karten-deck reaktionsschnell Weg

    Ich habe versucht, die <container>, <row> und <col> zu machen, reagieren, aber Sie verlieren die

    Alle Karten haben die gleiche Höhe

    Funktion der Karten-deck, wenn Sie das tun.
    Was Sie brauchen, ist CSS:

    .card-deck {
  margin: 0 -15px;
  justify-content: space-between;
}

.card-deck .card {
  margin: 0 0 1rem;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .card-deck .card {
    -ms-flex: 0 0 48.7%;
    flex: 0 0 48.7%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .card-deck .card {
    -ms-flex: 0 0 32%;
    flex: 0 0 32%;
  }
}

@media (min-width: 992px)
{
  .card-deck .card {
    -ms-flex: 0 0 24%;
    flex: 0 0 24%;
  }
}

    Hier ist mein CodePen:
    Bootstrap-4 Karten-deck reaktionsschnell Weg

    InformationsquelleAutor FrankieDoodie

Schreibe einen Kommentar