Comment ajouter un espacement entre les colonnes ?

Question

J'ai deux colonnes :

<div class="col-md-6"></div>
<div class="col-md-6"></div>

Comment puis-je ajouter un espace entre eux ?

Le résultat serait simplement deux colonnes côte à côte occupant toute la largeur de la page. Supposons que la largeur soit fixée à 1000px alors chaque div serait 500px large.

Si je voulais un 100px espace entre les deux comment pourrais-je réaliser cela automatiquement avec Bootstrap : le div deviendrait 450px chacun pour compenser l'espacement.

Answer 1

J'étais confronté au même problème, et la solution suivante a bien fonctionné pour moi.

<div class="row">
  <div class="col-md-6">
     <div class="col-md-12">
        Some Content.. 
     </div>
  </div>
  <div class="col-md-6">
     <div class="col-md-12">
        Some Second Content.. 
     </div>
  </div>
</div>

Cela rendra automatiquement un espace entre les deux divs.

Answer 2

Vous pouvez obtenir un espacement entre les colonnes en utilisant l'option col-md-offset-* les classes, documentées ici . L'espacement est cohérent afin 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>

Dans Bootstrap 4, utilisez : offset-2 o offset-md-2

Answer 3

Je sais que je suis en retard, mais vous pourriez essayer d'espacer les boîtes 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

Answer 4

Vous pouvez utiliser background-clip et box-model avec la propreté de la bordure.

.box{
  box-sizing: border-box;
  border: 3px solid transparent;
  background-clip:padding-box;
}

<div class="row">
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
  <div class="col-xs-4 box"></div>
</div>

Answer 5

J'ai eu des problèmes similaires avec l'espace entre les colonnes. Le problème de base est que les colonnes dans bootstrap 3 et 4 utilisent le padding au lieu de la marge. Ainsi, les couleurs d'arrière-plan de deux colonnes adjacentes se touchent.

J'ai trouvé une solution qui correspond à notre problème et qui fonctionnera probablement pour la plupart des gens qui essaient d'espacer les colonnes et de maintenir la même largeur de gouttière que le reste du système de grille.

C'est le résultat final que nous voulions obtenir

Le fait d'avoir un espace avec une ombre portée entre les colonnes posait problème. Nous ne voulions pas d'espace supplémentaire entre les colonnes. Nous voulions simplement que les gouttières soient "transparentes" afin que la couleur de fond du site apparaisse entre deux colonnes blanches.

voici le balisage des deux colonnes

<div class="row">
    <div class="col-sm-7">
        <div class="raised-block">
            <h3>Facebook</h3>
        </div>
    </div>
    <div class="col-sm-5">
        <div class="raised-block">
            <h3>Tweets</h3>
        </div>
    </div>
</div>

CSS

.raised-block {
    background-color: #fff;
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: -0.625rem; // for us 0.625rem == 10px
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
@media (max-width: 33.9em){ // this is for our mobile layout where columns stack
    .raised-block {
        margin-left: -0.625rem;
    }
}
.row [class^="col-"]:first-child>.raised-block {
    // this is so the first column has no margin so it will not be "indented"
    margin-left: -0.625rem;
}

Cette approche nécessite un div interne avec des marges négatives, comme la classe "row" utilisée par bootstrap. Et ce div, que nous avons appelé "raised-block", doit être le frère direct d'une colonne.

De cette façon, vous obtenez toujours un rembourrage approprié à l'intérieur de vos colonnes. J'ai vu des solutions qui semblent fonctionner en créant de l'espace, mais malheureusement, les colonnes qu'elles créent ont un rembourrage supplémentaire de chaque côté de la rangée, ce qui finit par rendre la rangée plus mince que celle pour laquelle la grille a été conçue. Si vous regardez l'image pour l'aspect souhaité, cela signifie que les deux colonnes ensemble seraient plus petites que la plus grande en haut, ce qui rompt la structure naturelle de la grille.

Le principal inconvénient de cette approche est qu'elle nécessite un balisage supplémentaire pour envelopper le contenu de chaque colonne. Pour nous, cela fonctionne car seules certaines colonnes ont besoin d'espace entre elles pour obtenir l'aspect souhaité.