Maison > interface Web > tutoriel CSS > Comment affiner l'espacement dans les colonnes de la grille Bootstrap ?

Comment affiner l'espacement dans les colonnes de la grille Bootstrap ?

Patricia Arquette
Libérer: 2024-11-05 11:24:01
original
225 Les gens l'ont consulté

How to Fine-Tune Spacing in Bootstrap Grid Columns?

Affiner l'espacement de la grille Bootstrap

Dans la disposition de votre grille Bootstrap, vous êtes confronté à un défi avec l'espacement entre les colonnes. Bien que la solution consistant à utiliser col-md-5 avec pull-left et pull-right puisse entraîner trop d'espace, une approche plus nuancée est disponible.

Solution : imbriquer une division dans les colonnes

Imbriquer un div dans chaque colonne col-md-6 et appliquer la marge et le remplissage souhaités au div imbriqué. Cette approche maintient l'intégrité structurelle de la colonne tout en permettant un espacement supplémentaire au sein de chacune.

Code :

<code class="html"><div class="row">
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 1</div>
    </div>
    <div class="text-center col-md-6">
        <div class="classWithPad">Widget 2</div>
    </div>
</div></code>
Copier après la connexion

CSS :

<code class="css">.classWithPad {
    margin: 10px;
    padding: 10px;
}</code>
Copier après la connexion

Avec cette solution, vous pouvez facilement ajouter l'espacement souhaité à vos colonnes sans sacrifier la cohérence structurelle de la disposition en grille.

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