wake-up-neo.com

Bootstrap 4-Kartendeck-Tabellenspalten reagieren auf Ansichtsfenster?

In Bootstrap v4 gibt es also eine neue Funktion für Kartendecks ( http://v4-alpha.getbootstrap.com/components/card/#decks ), mit der eine Gruppe von Karten mit gleicher Höhe erstellt wird zum höchsten Inhalt in der Gruppe.

Es scheint, dass die Anzahl der Spalten von der Anzahl der Kartendivis in der Gruppe abhängt. Gibt es eine Möglichkeit, die Anzahl der Spalten basierend auf dem Ansichtsfenster zu ändern? Zum Beispiel 4 Spalten/Karte breit bei großer Breite, 2 breit bei mittlerer Breite und 1 bei geringer Breite?

Gegenwärtig bleibt die gleiche Anzahl von Spalten/Karten bis zu einer Breite von weniger als 544 Pixel bestehen. Ab 544px haben sie display: table-cell mit der screen (min-width: 544px)-Regel.

Gibt es eine Möglichkeit, die Anzahl der Spalten der Karten je nach Ansichtsfenster zu ändern, indem nur das CSS geändert wird?

Bearbeiten - Flex/Flexbox wird aufgrund der Unterstützung von IE nicht verwendet

Codepen-Beispiel für 4 Spalten/Kartenbreite und 3 Spalten/Kartenbreite unter http://codepen.io/jpost-vlocity/full/PNEKKy/

6
jpostdesign

Update 2018

Es ist schwierig, die Kartenbreite mit card-deck einzustellen (responsive), da display:table-cell und width:1% verwendet werden.

Ich fand es einfacher, sie mit den Karten im Bootstap-Grid col-* ansprechbar zu machen, und dann können Sie die Haltepunkte des Grid-Viewports verwenden. Aktivieren Sie die Flexbox von Bootstrap, wenn die Karten die gleiche Höhe haben sollen wie der card-deck.

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

Außerdem wurde img-responsive in img-fluid geändert.

Bootstrap 4.0.0

Flexbox ist jetzt die Standardeinstellung , aber es gibt immer noch keinen unterstützten Weg, um responsive Kartendecks zu erstellen. Die empfohlene Methode ist die Verwendung von Karten innerhalb des Gitters:

Responsive Karten mit Raster

Eine andere Möglichkeit, ein responsives Kartendeck zu erstellen, besteht darin, responsive reset divs alle x Spalten zu verwenden. Dadurch werden Karten gezwungen, sich an bestimmten Haltepunkten einzuwickeln.

Zum Beispiel: 5 auf xl, 4 auf lg, 3 auf md, 2 auf sm usw.

Responsive Kartendecksdemo ( 4.0.0 )
Responsive Kartendecksdemo (Alpha 6)
Variation der CSS-Pseudoelemente

7
Zim

Los geht's, http://codepen.io/KarlDoyle/pen/pypWbR

Die Hauptsache ist, dass Sie die Stile überschreiben müssen. Wie nachfolgend dargestellt.

.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*/
}
5
Karl Doyle

Ich habe eine ziemlich einfache Problemumgehung mit CSS-Grid gefunden. Sie könnten den 250px an Ihren Anwendungsfall anpassen.

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}
5
esitarz

Versuche dies

<div class="container">
    <div class="card-deck">
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
        <div class="card my-3">
            <img src="http://placehold.it/560x560" class="card-img-top">
            <div class="card-body">
                <h4 class="card-title">Title</h4>
                <p class="card-text">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <button class="btn btn-primary" type="button">Button</button>
            </div>
        </div>
    </div>
</div>
// 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});
        }
    }
}

Demo zum Codepen Bootstrap 4-Kartenstapel

0

Bootstrap 4-Kartendeck reagiert

Ich habe versucht, <container>, <row> und <col> zu verwenden, um es ansprechbar zu machen, aber Sie verlieren das 

Alle Karten haben die gleiche Höhe

feature des Kartenspiels, 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-Kartenstapel reagiert

0
FrankieDoodie

Lass einfach h-100 Klasse auf Karten im Raster.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-sm-6 my-3">
    <div class="card h-100"> <!-- full height -->
      <div class="card-header"></div>
      <div class="card-body">1</div>
      <div class="card-footer"></div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100"> <!-- full height -->
      <div class="card-header"></div>
      <div class="card-body">2a <br> 2b <br> 2c</div>
      <div class="card-footer"></div>
    </div>
  </div>
  <div class="col-sm-6 my-3">
    <div class="card h-100"> <!-- full height -->
      <div class="card-header"></div>
      <div class="card-body">3</div>
      <div class="card-footer"></div>
    </div>
  </div>
</div>
0
kornieff