Maison > interface Web > tutoriel CSS > le corps du texte

Pourquoi mes colonnes Bootstrap 4 sont-elles alignées verticalement plutôt qu'horizontalement ?

Susan Sarandon
Libérer: 2024-11-10 12:08:02
original
633 Les gens l'ont consulté

Why Are My Bootstrap 4 Columns Vertically Aligned Instead of Horizontally?

Incohérences d'alignement des colonnes Bootstrap 4

Dans la transition de Bootstrap 3 à 4, vous avez remarqué que vos colonnes sont alignées verticalement au lieu de horizontalement. Cela peut être attribué à un changement dans le système de grille dans Bootstrap 4.

Problème Col-12

Dans Bootstrap 3, vous pouvez envelopper des colonnes dans une ligne parent en utilisant la classe "col-12". Ceci n'est plus valable dans Bootstrap 4. Chaque niveau d'imbrication a sa propre ligne, supprimez donc la classe "col-12" de la ligne parent :

<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>
Copier après la connexion

Cela garantira que les colonnes sont alignées horizontalement et maintenir leur comportement attendu. Pour plus d'informations sur l'imbrication dans Bootstrap, reportez-vous à leur documentation officielle : https://getbootstrap.com/docs/4.0/layout/grid/#nesting

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal