Comment ajouter une marge/un remplissage entre les colonnes Bootstrap sans casser la mise en page ?

Comment ajouter une marge/un espace de remplissage entre les colonnes dans Bootstrap ?

Lors de la conception d'un site Web à l'aide de Bootstrap, il est courant de devoir ajouter une marge supplémentaire ou un espace de remplissage entre les colonnes . En essayant d'y parvenir, certains utilisateurs ont rencontré des résultats insatisfaisants.

Une méthode populaire consiste à modifier les classes de colonnes en col-md-5 avec pull-left ou pull-right. Cependant, cette approche peut créer des écarts trop importants.

Une solution plus efficace consiste à imbriquer un div dans la classe col-md-6 d'origine. Ce div peut ensuite être stylisé avec la marge et le remplissage souhaités.

Voici un exemple :

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

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

En utilisant cette méthode, vous pouvez facilement ajouter la marge et l'espace de remplissage souhaités. entre les colonnes sans compromettre la disposition des colonnes. Cette technique apporte de la flexibilité et permet un contrôle précis de l'espacement entre les éléments.

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!