Je suis sûr qu'il existe une solution simple à ce problème. En gros, si j'ai deux colonnes, comment puis-je ajouter un espace entre elles ?
Par exemple, si le html est :
<div class="col-md-6"></div>
<div class="col-md-6"></div>
Le résultat sera simplement deux colonnes l'une à côté de l'autre occupant toute la largeur de la page. Si la largeur est fixée à 1000px
, chaque div aura une largeur de 500px
.
Si je voulais un espace de 100px entre les deux, comment pourrais-je y parvenir ? Évidemment, grâce à Bootstrap, la taille des sections devient automatiquement de 450px pour compenser l'espace.
Vous pouvez obtenir un espacement entre les colonnes en utilisant les classes [col-md-offset-*
, documentées ici][1]. L'espacement est cohérent, de sorte que toutes vos colonnes s'alignent correctement. Pour obtenir un espacement et une taille de colonne uniformes, je ferais ce qui suit :
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
[1] : https://getbootstrap.com/docs/3.3/css/#grid-offsetting
Je sais que je suis en retard, mais vous pourriez essayer d'espacer les cases avec du rembourrage.
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS :
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
Essayez-le
Cela permettra de laisser un espace entre les deux colonnes et, évidemment, si vous souhaitez modifier la largeur par défaut, vous pouvez utiliser des mixins pour modifier la largeur bootstrap par défaut. Ou bien, vous pouvez donner la largeur en utilisant le style CSS en ligne.
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>