Bootstrap 4 card-deck avec nombre de colonnes basé sur viewport

Je suis en train de mettre en œuvre la carte de le pont-de fonctionnalité dans le bootstrap 4 pour faire toutes mes cartes de la même hauteur.

Les exemples que bootstrap fournit montrer 4 belles cartes, mais c'est 4 cartes sur la ligne, peu importe la fenêtre d'affichage. Voir la codeply ici.

Cela ne fait pas de sens pour moi, car, je suppose, que vous voulez une taille minimale de votre carte de réduire à pour que votre contenu à toujours bon.

J'ai ensuite essayé d'ajouter dans certains de fenêtre d'affichage des classes de pause sur les tailles d'écran, mais dès que la div, la carte de le pont-ne s'applique pas plus, donc de ne pas prendre les cartes de même hauteur.

Comment puis-je obtenir ce accompli? Est-ce une fonctionnalité manquante qui sera abordée dans la version de Bootstrap 4?

Voici le violon: 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>

source d'informationauteur ganders

  1. 19

    Mis à jour 2018

    Si vous voulez un sensibles de la carte de pont -utilisez la visibilité utils pour forcer une enveloppe de toutes les X colonnes sur les différentes largeur de la fenêtre d'affichage(points d'arrêt)...

    Bootstrap 4 responsive carte-pont (v 4.0.0)

    Réponse originale à cette question pour Bootstrap 4 alpha 2:

    Vous pouvez utiliser la grille de col-*-* pour obtenir les différentes largeurs de (au lieu de la carte-pont), puis définir l'égalité de hauteur pour les cols, à l'aide de flexbox.

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

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

    Le problème, c'est que w/o flexbox permis à la card-deck utilise table-cell où il devient très difficile de contrôler la largeur. Comme Bootstrap 4 Alpha 6, flexbox est par défaut de sorte que le CSS supplémentaires n'est pas nécessaire pour flexbox, et la h-100 classe peut être utilisée pour rendre les cartes pleine hauteur: http://www.codeply.com/go/gnOzxd4Spk

    Liés à la question:
    Bootstrap 4 - Sensibles cartes carte-colonnes

  2. 6

    Voici une solution avec Sass pour configurer le nombre de cartes par ligne, selon les points d'arrêt: https://codepen.io/migli/pen/OQVRMw

    Il fonctionne très bien avec 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});
}
}
}
  3. 1

    Il y a de plus simple solution pour que - fixe la hauteur de la carte des éléments - d'en-tête et le corps. De cette façon, nous pouvons mettre en resposive d'une mise en page standard de bootstrap grille de colonne.

    Voici mon exemple:
    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>
  4. 0
    <div class="w-100 d-lg-none mt-4"></div>

    J'ai créé 4 cartes et placez ce code entre la deuxième et la troisième carte, essayez ceci.

  5. -1

    Il m'a fallu un peu de cela, mais la réponse est de ne pas utiliser une carte de pont, mais au lieu d'utiliser .row et .cols.

    Ce qui fait un ensemble adapté de cartes avec des spécificités pour chaque taille d'écran: 3 cartes pour xl2 pour lg et mdet 1 pour sm et xs. .my-3 met un padding sur le haut et le bas de sorte qu'ils ont l'air bien.

    mixin postList(stuff)
.row
- site.posts.each(function(post, index){
.col-sm-12.col-md-6.col-lg-6.col-xl-4
.card.my-3
img.card-img-top(src="...",  alt="Card image cap")
.card-body
h5.card-title Card title #{index}
p.card-text Some quick example text to build on the card title and make up the bulk of the cards content.
a.btn.btn-primary(href="#") Go somewhere
- })