Comment contrôler les marges et le remplissage entre les colonnes dans Bootstrap ?

Gérer les marges et le remplissage dans les colonnes avec Bootstrap

Lorsque vous travaillez avec la disposition en grille de Bootstrap, il peut être souhaitable d'ajuster l'espace entre les colonnes. Ceci peut être réalisé en incorporant une marge et un remplissage supplémentaires.

Une approche courante consiste à modifier les classes des colonnes, en utilisant des options telles que col-md-5 avec pull-left et pull-right. Cependant, cette technique peut entraîner un espacement excessif.

Une solution alternative consiste à créer un élément div imbriqué dans chaque colonne col-md-6. L'épine dorsale de la colonne reste intacte, tandis que le div imbriqué peut se voir attribuer la marge et le remplissage souhaités.

Exemple :

HTML :

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

Cette approche permet un contrôle précis de l'espacement entre les colonnes, sans compromettre la disposition de la 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!