Pourquoi utiliser la classe .w-100 de Bootstrap pour diviser les colonnes d'une ligne en deux lignes, alors que vous pourriez simplement faire deux lignes?

Question

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 rangée. 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> 

Est-il une différence entre l'utilisation de la .w-100 classe CSS et juste créer deux lignes au lieu?

Answer 1

Dans ce cas spécifique, il n'y a pas de différence.

Cependant, en gardant les dans un .row Col. unique est généralement mieux pour ces raisons ...

Colonne commande

Supposons que vous voulez au lieu de changer l'ordre des première et dernière colonnes sur md et plus. Cela ne serait pas possible avec des conteneurs séparés .row. Garder tous les col en un seul .row le 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 Responsive

Un autre exemple. Supposons que vous au lieu voulu une mise en page:

• 4 cols à travers 1 rang sur md largeur (4x1)
• 2 cols à travers 2 rangs sur xs largeur (2x2)

Encore une fois, ceci ne pas être possible avec des divs séparés .row. Mais, puisque le w-100 peut être utilisé en réponse, cela est possible en gardant tous les cols dans une seule rangée.

<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> 

Demo of the layouts