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

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>

CSS :

<code class="css">.classWithPad {
    margin: 10px;
    padding: 10px;
}</code>

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!