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

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

不言
Libérer: 2018-11-06 13:46:55
original
3500 Les gens l'ont consulté

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

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

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

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

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

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!

Étiquettes associées:
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal