Comment puis-je ajouter de l'espace supplémentaire entre les colonnes de la grille Bootstrap ?

Créer un espace supplémentaire entre les colonnes de la grille avec Bootstrap

L'ajout d'une marge supplémentaire et d'un espace de remplissage entre les colonnes dans une disposition de grille Bootstrap peut améliorer l'attrait visuel de votre site Internet. Bien que l'utilisation de pull-left et pull-right avec des classes col-md-5 modifiées puisse être une option, cela peut entraîner des espaces excessifs.

Une solution plus élégante consiste à créer un div imbriqué dans chaque colonne et à appliquer le rembourrage souhaité. Cette approche préserve la structure des colonnes tout en permettant un espace supplémentaire.

Mise en œuvre du code

Considérez le code HTML modifié suivant :

<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>

Styles CSS

Pour appliquer la marge et le remplissage souhaités, ajoutez le CSS suivant :

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

En implémentant cette méthode, vous pouvez effectivement ajouter un espace supplémentaire entre les colonnes de votre grille tout en maintenir l'intégrité de votre mise en page.

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!