Comment résoudre le problème d'empilement de l'espacement vertical dans les colonnes Bootstrap

Cet article vous présente la solution au problème d'empilement de l'espacement vertical dans les colonnes Bootstrap. Les amis dans le besoin peuvent s'y référer.

Problèmes rencontrés

Lors de l'utilisation de Twitter Bootstrap, j'ai rencontré des problèmes d'espacement vertical lorsque les colonnes du bootstrap ont commencé à s'empiler. Par exemple, regardons une disposition à 3 colonnes pour un écran de taille moyenne. (Tutoriel recommandé : Tutoriel Bootstrap)

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

Si cette mise en page est affichée sur une tablette ou un téléphone, toutes les colonnes seront empilées, mais chaque colonne peut toucher directement la colonne précédente.

Une solution simple consiste à ajouter une marge inférieure à chaque colonne :

[class*="col-"] {
    margin-bottom: 15px;
}

Cela fonctionne dans certains cas, mais ajoute une marge supplémentaire inutile lorsqu'elle n'est pas nécessaire.

Solution

Pour résoudre ce problème, nous pouvons créer une nouvelle classe CSS qui applique la marge supérieure aux colonnes lorsqu'elles sont empilées :

.row.row-grid [class*="col-"] + [class*="col-"] {
    margin-top: 15px;}
    @media (min-width: 1200px) {
    .row.row-grid [class*="col-lg-"] + [class*="col-lg-"] {
        margin-top: 0;
    }
    }
    @media (min-width: 992px) {
    .row.row-grid [class*="col-md-"] + [class*="col-md-"] {
        margin-top: 0;
    }
    }
    @media (min-width: 768px) {
    .row.row-grid [class*="col-sm-"] + [class*="col-sm-"] {
        margin-top: 0;
    }
    }

Le La classe row-grid applique la marge supérieure à la colonne avec la colonne précédente, media query supprime ensuite la marge supérieure lorsqu'elle n'est pas nécessaire.

Dans le même ordre d'idées, si vous souhaitez ajouter un espacement vertical entre les lignes, ajoutez cette ligne à votre CSS :

.row-grid + .row-grid {
    margin-top: 15px;
    }

Utilisation

Ajoutez simplement la classe row-grid aux lignes pour lesquelles vous souhaitez activer l’espacement vertical des colonnes.

<div class="row row-grid">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

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!