Pourquoi mes colonnes sont-elles alignées verticalement dans Bootstrap 4 après la mise à niveau depuis Bootstrap 3 ?

Bootstrap 3 vers Bootstrap 4 : colonnes alignées verticalement

Lors de la mise à niveau de Bootstrap 3 vers Bootstrap 4, certains utilisateurs peuvent rencontrer un problème où leur les colonnes sont alignées verticalement plutôt qu'horizontalement.

Le Cause :

Bootstrap 4 nécessite une nouvelle ligne pour les colonnes imbriquées. L'ancienne classe col-12, qui couvrait toute la ligne, n'est plus nécessaire.

La solution :

Pour résoudre ce problème, supprimez la classe col-12 du parent rangée.

Exemple :

<div class="row">
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
    <div class="col-md-2">
        <h1>TEST</h1>
    </div>
</div>

Voyez la différence dans ce JS Fiddle mis à jour :

https:// jsfiddle.net/aq9Laaew/4792/

En supprimant la classe col-12, le les colonnes s'aligneront désormais horizontalement comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!