web-dev-qa-db-fra.com

Cartes de différentes tailles dans Bootstrap 4 card-group

Est-il possible de mélanger des cartes de différentes tailles dans un groupe de cartes en Bootstrap 4. Je veux avoir une grande carte (double largeur) sur la taille de gauche, et deux petites cartes sur la droite , avec la même hauteur des trois.

<div class="container">
  <div class="row">
    <div class="card-group">
        <div class="card col-md-6">
          <div class="card-block">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">Text 1</p>
          </div>
        </div>
         <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">Text 2</p>
            <p class="card-text">More text 2</p>
            <p class="card-text">More text 2</p>
          </div>
        </div>
        <div class="card col-md-3">
          <div class="card-block">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">Text 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
twitter-bootstraptwitter-bootstrap-4bootstrap-4
11
Ole Kristian Losvik

Je pense que l'intention est que les groupes de cartes soient de largeur et de hauteur égales ( http://v4-alpha.getbootstrap.com/components/card/#groups ), mais vous pouvez remplacer la valeur par défaut Bootstrap comportement pour le faire fonctionner comme ceci ..

.card-group [class*='col-'] {
  float:none;
}

http://codeply.com/go/4WVwRBTyTP

Remarque: les sélecteurs CSS génériques comme celui-ci sont lents. Il serait préférable d'ajouter une classe CSS spéciale pour remplacer le Bootstrap float:left comportement des colonnes dans votre card-group

[~ # ~] mise à jour [~ # ~]

Maintenant que BS4 a flexbox, le CSS supplémentaire n'est plus requis. Faites simplement le card-group et row le même div, puis utilisez col-* comme d'habitude pour définir la largeur. Cependant, en utilisant card-group empêchera l'habillage réactif des colonnes.

http://www.codeply.com/go/jzIcjyg6Xa

11
Zim

La documentation Bootstrap 4.1 pour disposition des cartes indique actuellement:

Pour le moment, ces options de mise en page ne sont pas encore réactives.

Cependant, comme réponse de Zim l'a souligné, les groupes de cartes sont désormais flexbox. Par conséquent, vous pouvez également remplacer le flex-grow style pour définir les tailles de carte relatives.

<div class="card-group">
    <div class="card" style="flex-grow: 2">
        <div class="card-block">
            <h4 class="card-title">Card 1</h4>
            <p class="card-text">Text 1</p>
        </div>
    </div>
    <div class="card">
        <div class="card-block">
            <h4 class="card-title">Card 2</h4>
            <p class="card-text">Text 2</p>
            <p class="card-text">More text 2</p>
            <p class="card-text">More text 2</p>
        </div>
    </div>
    <div class="card">
        <div class="card-block">
            <h4 class="card-title">Card 3</h4>
            <p class="card-text">Text 3</p>
        </div>
    </div>
</div>

Codeply

6
Mat