web-dev-qa-db-fra.com

Jeu de cartes Bootstrap 4 avec nombre de colonnes basé sur la fenêtre

J'essaie d'implémenter la fonctionnalité de cartes dans le bootstrap 4 pour que toutes mes cartes aient la même hauteur.

Les exemples fournis par bootstrap montrent 4 belles cartes, mais il en reste 4 sur la rangée, quelle que soit la fenêtre d'affichage. Voir le codeply ici .

Cela n’a aucun sens pour moi puisque je suppose que vous voudriez que la taille de votre carte soit réduite à une taille minimale pour que votre contenu ait toujours une belle apparence.

J'ai ensuite essayé d'ajouter certaines classes de viewport pour modifier la taille de l'écran, mais dès que cette div est ajoutée, le jeu de cartes ne s'applique plus, ce qui rend les cartes de même hauteur.

Comment puis-je obtenir ceci accompli? Est-ce une fonctionnalité manquante qui sera traitée dans la version complète 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>
csstwitter-bootstraptwitter-bootstrap-4bootstrap-4
30
ganders

Mise à jour 2018

Si vous voulez un jeu de cartes responsive, utilisez les outils de visibilité pour forcer le retour à la ligne chaque colonne sur une largeur de fenêtre différente (points d'arrêt) ...

Bootstrap 4 responsive jeu de cartes (v 4.1)

Réponse originale pour Bootstrap 4 alpha 2:

Vous pouvez utiliser la grille col-*-* pour obtenir les différentes largeurs (au lieu de jeu de cartes), puis définir une hauteur égale pour les colonnes à l'aide de flexbox.

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

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

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

Question connexe:Bootstrap 4 - Cartes réactives en colonnes

36
Zim

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

Cela fonctionne 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});
        }
    }
}
20
migli
<div class="w-100 d-lg-none mt-4"></div>

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

3
Mohammad Ayoub Khan

Il existe une solution plus simple pour cela - définir une hauteur fixe pour les éléments de carte - en-tête et corps. De cette façon, nous pouvons définir une présentation réactive avec la grille de colonnes boostrap standard. 

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>
1
Bart Gluszak