Pourquoi mes colonnes ne s'alignent-elles pas correctement après la migration vers Bootstrap 4 ?

Problème d'alignement horizontal dans la migration Bootstrap de 3 à 4

Lors de la transition de Bootstrap 3 à 4, les utilisateurs peuvent rencontrer un problème d'alignement vertical pour les colonnes. Pour résoudre ce problème, il est essentiel de prendre en compte les modifications d'imbrication introduites dans Bootstrap 4.

Auparavant, dans Bootstrap 3, les colonnes imbriquées pouvaient être placées dans une colonne avec la même classe de colonne (par exemple, col-12). Cependant, dans Bootstrap 4, l'imbrication nécessite une nouvelle ligne pour chaque niveau d'imbrication. Ce changement élimine le problème d'alignement centré et garantit un alignement horizontal correct.

Le code mis à jour suit l'approche d'imbrication révisée :

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

Dans ce code mis à jour, l'imbrication est supprimée et chaque colonne est placé dans sa propre rangée. En respectant les directives d'imbrication recommandées, l'alignement horizontal est restauré, garantissant une représentation visuelle appropriée.

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!