web-dev-qa-db-fra.com

Pourquoi utiliser la classe Bootstrap .w-100 pour diviser une colonne de lignes en deux lignes, alors que vous pouvez simplement créer deux lignes?

Sur cette page dans la documentation Bootstrap à https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row ils donnent cet exemple:

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Cela crée deux lignes avec deux colonnes de taille égale dans chaque ligne. Cependant, vous pouvez y parvenir simplement en créant deux lignes:

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Y a-t-il une différence entre l'utilisation du .w-100 Classe CSS et juste créer deux lignes à la place?

twitter-bootstrapbootstrap-4twitter-bootstrap-4
15
Al Sweigart

Dans ce cas précis, il n'y a pas de différence.

Cependant, en conservant les colonnes dans un seul .row est généralement meilleur pour ces raisons ...

Ordre des colonnes

Supposons que vous souhaitiez à la place changer l'ordre des première et dernière colonnes sur md et plus. Ce ne serait pas possible avec un .row conteneurs. Conserver tous les col dans un seul .row Rend possible.

<div class="row">
    <div class="col flex-md-last">col 1</div>
    <div class="col">col 2</div>
    <div class="w-100"></div>
    <div class="col">col 3</div>
    <div class="col flex-md-first">col 4</div>
</div>

Mises en page réactives

Un autre exemple. Supposons que vous vouliez plutôt une mise en page de:

  • 4 colonnes sur 1 ligne sur md largeur (4x1)
  • 2 colonnes sur 2 lignes sur xs largeur (2x2)

Encore une fois, cela ne serait pas possible avec un .row divs. Mais, puisque le w-100 peut être utilisé de manière réactive, ceci est possible en gardant tous les cols sur une seule ligne.

<div class="row">
    <div class="col col-md-3">col 1</div>
    <div class="col col-md-3">col 2</div>
    <div class="w-100 hidden-md-up"></div>
    <div class="col col-md-3">col 3</div>
    <div class="col col-md-3">col 4</div>
</div>

Démo des mises en page

20
Zim