twitter bootstrap système de grille. Espacement entre les colonnes

je suis sûr qu'il y a une solution simple à ce problème. En gros, si j'ai deux colonnes comment puis-je ajouter un espace entre eux?

par exemple si le code html est :

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

la sortie serait simplement deux colonnes juste à côté de l'autre prenant la largeur entière de la page. Disons que la largeur a été réglée à 1000px alors chaque div serait 500px de large.

si je voulais un 100px espace entre les deux comment pourrait - Je y parvenir? Évidemment automatiquement par bootstrap les tailles de div deviendraient 450px chacun pour compenser l'espace

151
demandé sur Erol Aliyev 2013-09-11 14:27:46

21 réponses

vous pouvez obtenir l'espacement entre les colonnes en utilisant les classes col-md-offset-* , documentées ici . L'espacement est cohérent de sorte que toutes vos colonnes s'alignent correctement. Pour obtenir l'espacement Pair et la taille de colonne 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>
115
répondu Ben 2018-04-04 08:51:50

je faisais face à la même question; et ce qui suit a bien fonctionné pour moi. Espérons que cela aide quelqu'un à atterrir ici:

<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 va automatiquement rendre un peu d'espace entre les 2 divs.

enter image description here

270
répondu Utpal - Ur Best Pal 2015-04-11 09:40:37

je sais que je suis en retard à la fête, 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;
}

Avoir un aller à elle

64
répondu Robin Jonsson 2014-07-25 08:48:44

Utilisation s'amorce

.form-group

de la classe. Comme ceci dans votre cas:

<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
11
répondu S.. 2015-02-17 10:47:49

cela permettra un espace entre les deux colonnes et évidemment si vous voulez changer le la largeur par défaut vous pouvez aller pour les mixins pour modifier la largeur par défaut de bootstrap. Ou, vous pouvez donner la largeur en utilisant le style inline css. Le choix est entièrement vôtre!!!

  <div class="col-md-5 pull-left"></div>
    <div class="col-md-5 pull-right"></div>

santé!!!

10
répondu Amit 2013-09-12 07:26:14

vous pouvez utiliser l'arrière-plan-clip et boîte-modèle avec bordure de propriété

.box{
  box-model: 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>
8
répondu Ali El Habchi 2016-06-01 10:39:24

vous pouvez obtenir l'espacement entre les colonnes en utilisant les classes col-xs -*, à l'intérieur dans un col-xs-* div codé ci-dessous. L'espacement est cohérent de sorte que toutes vos colonnes s'alignent correctement. Pour obtenir l'espacement Pair et la taille de colonne je ferais ce qui suit:

<div class="container">
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
    <div class="col-md-3 ">
        <div class="col-md-12 well">
            Some Second Content..
        </div>
    </div>
</div>
7
répondu User_3535 2015-05-14 07:44:02

j'ai eu des problèmes similaires avec l'espace entre les colonnes. Le problème fondamental est que les colonnes de bootstrap 3 et 4 utilisent le rembourrage au lieu de la marge. Ainsi les couleurs de fond pour deux colonnes adjacentes se touchent l'une l'autre.

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

C'était le résultat final que nous allions pour

enter image description here

Avoir l'écart avec une ombre entre les colonnes est problématique. Nous ne voulons pas d'espace supplémentaire entre les colonnes. Nous voulions juste que les gouttières soient "transparentes" pour que la couleur de fond du site apparaisse entre deux colonnes blanches.

c'est le balisage pour les 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;
}

This l'approche nécessite une div interne avec des marges négatives tout comme la classe" row " utilise bootstrap. Et cette div, nous l'avons appelé "bloc en relief", doit être le frère direct d'une colonne

de cette façon, vous obtenez toujours le 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'ils créent ont un rembourrage supplémentaire de chaque côté de la rangée donc il finit par rendre la rangée plus mince que la disposition de grille a été conçu pour. Si vous regardez l'image pour le look désiré, cela signifierait que les deux colonnes ensemble serait plus petite que celle du plus grand sur le dessus qui casse la structure naturelle de la grille.

le principal inconvénient de cette approche est qu'elle nécessite une marge supplémentaire enveloppant le contenu de chaque colonne. Pour nous cela fonctionne parce que seulement des colonnes spécifiques ont eu besoin d'espace entre eux pour atteindre l'aspect désiré.

Espérons que cette aide

6
répondu Joe Fitzgibbons 2015-11-03 16:05:54

Bootstrap 4 , fichier personnalisé.scss vous pouvez ajouter le code suivant:

$grid-gutter-width-base: 20px;

$grid-gutter-widths: ( xs: $grid-gutter-width-base, 
sm: $grid-gutter-width-base, 
md: $grid-gutter-width-base, 
lg: $grid-gutter-width-base, 
xl: $grid-gutter-width-base
);

par défaut $grille-gouttière de la largeur de la base: 30px;

4
répondu Ivan Djordevic 2017-05-15 08:13:36

j'ai dû trouver comment faire pour 3 colonnes. Je voulais arrondir les angles des divs et je n'arrivais pas à faire fonctionner l'espacement. J'ai utilisé les marges. Dans mon cas, j'ai pensé que 90% de l'écran devait être rempli par les divs et 10% pour les marges:

html:

<div class="row">
  <div id="orange" class="col-md-4">
    <h1>Orange Div</h1>
  </div>
  <div id="green" class="col-md-4">
    <h1>Green Div</h1>
  </div>
  <div id="aqua" class="col-md-4">
    <h1>Aqua Div</h1>
  </div>
</div>

et CSS:

#orange {
    background-color:orange;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width:30%;
}
#green {
    background-color:green;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 0 0 0;
    width:30%;
}
#aqua {
    background-color:#39F;
    border-radius: 30px;
    padding: 20px;
    margin: 2.5% 2.5% 0 2.5%;
    width: 30%;
}

pour le faire redimensionner correctement pour les appareils mobiles, j'ai fait changer la largeur de CSS de 30% à width:92.5%; sous @media (max-width:1023px)

2
répondu Laser One Jim 2016-05-18 09:07:33

dans le col-md -?, créer un autre div et mettre l'image dans la div, que vous pouvez facilement ajouter rembourrage comme si.

<div class="row">
  <div class="col-md-8">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>
  <div class="col-md-4">
     <div class="thumbnail">
       <img src="#"/>
     </div>
  </div>   
</div>

<style>
  thumbnail{
     padding:4px;
           }
</style>
2
répondu Farac 2016-07-14 03:54:25

pourquoi ne pas simplement ajouter une bordure de la même couleur que le fond en utilisant css? Je suis nouvelle, donc il y a peut-être une bonne raison de ne pas le faire, mais ça avait l'air bien quand je l'ai essayé.

1
répondu Brian 2015-04-02 19:08:23
    <div class="col-md-12 no_padding header_row"></div>



    <div class="second_row">
        <div class="col-md-4 box_shadow"></div>
        <div class="col-md-8 no_padding_right">
            <div class="col-md-12 box_shadow"></div>
        </div>
    </div>


    body{
    background:#F0F0F0;
}

.main_holder{
    min-height: 600px;
    margin-top: 40px;
    height: 600px;
}
.box_shadow{
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    background: white;
    height: auto;
    min-height: 500px;
}

.no_padding{
    padding: 0px !important;
}

.no_padding_right{
    padding-right: 0px !important;
}

.header_row{
    height: 60px;
    background: #00796B;
    -webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    -moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
    box-shadow: 0px 0px 9px 1px rgba(143,140,143,1); 
}

.second_row{
    position: relative;
    width: 100% !important;
    top: 20px;
}
1
répondu RITHIN K 2016-10-28 07:49:52

puisque vous utilisez bootstrap , je suppose que vous voulez faire la chose responsive . Dans ce cas, vous ne devez pas utiliser des tailles fixes, dans " px " par exemple.

pour contourner d'autres solutions, je propose de faire les deux colonnes "col-md-5" au lieu de "col-md-6", puis dans l'élément parent "row" qui contient les colonnes, ajouter la classe "justify-content-between", qui met l'espace libre au milieu, comme vous pouvez le vérifier le "bootstrap" doc ici

Cette solution est également valable pour plus de deux colonnes ajustant le "col-md-x" bien sûr

j'espère que ça aide ;)

1
répondu Hugo 2018-06-11 13:45:38

Façon Simple

.row div{
  padding-left: 8px;
  padding-right: 8px;
}
1
répondu Vladislav Koshenevskiy 2018-07-10 03:02:49

c'est simple .. il faut ajouter solid border droite, gauche à col-* et il convient de travail ..:)

il ressemble à ceci: http://i.stack.imgur.com/CF5ZV.png

HTML:

<div class="row">
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
     <div class="col-sm-3" id="services_block">

     </div>
</div>

CSS:

div#services_block {
   height: 355px;
   background-color: #33363a;
   border-left:3px solid white;
   border-right:3px solid white;
}
0
répondu Mohamed Ahmed 2015-09-13 18:09:33

pour obtenir une largeur particulière d'espacement entre les colonnes, nous devons configurer padding dans la disposition standard de Bootstrap.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
@media (min-width: 992px) { 
  .space-100-px > .row > .col-md-6:first-child {
    padding: 0 50px 0 0; /* The first half of 100px */
  }
  .space-100-px > .row > .col-md-6:last-child {
    padding: 0 0 0 50px; /* The second half of 100px */
  }
}

/* The result will be easier to see. */ 
.space-100-px img {
  width: 100%;
  height: auto;
}
<div class="container-fluid space-100-px">
  <div class="row">
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Left" alt="Left">
    </div>
    <div class="col-md-6">
      <img src="http://placehold.it/450x100?text=Right" alt="Right">
    </div>
  </div>
</div>
0
répondu Gleb Kemarsky 2016-05-18 11:30:17

Ce sera utile..

.list-item{
  margin-right:-10px;
   margin-top:10px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    padding: 0px;
  }
<div class="col-md-4">
  <div class="list-item">
      <h2>Your name</h2> 
  </div>
</div>
<div class="col-md-4">
   <div class="list-item"></div>
</div>

si l'utilisation veut augmenter ou diminuer encore la marge dans le côté droit de la boîte alors éditez simplement la propriété marge-droite de l'élément de liste.

sortie d'échantillon

enter image description here

0
répondu arulraj 2016-06-01 12:40:28

Juste en bordure blanche autour de wrap élément

.padding-pls{
  border-left: 13px solid white;
  border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
  border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
  border-right: 0px solid white;
}

et premier et dernier enfant sans frontière

    <div class="row">
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
      <div class="col-md-6">
        <div class="col-md-12 padding-pls">
          Keci
        </div>
      </div>
  </div>
0
répondu Jakub Stejskal 2016-07-20 14:39:55
<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

par défaut, cela fournit un peu de rembourrage à l'intérieur de la div externe de la façon dont vous semblez avoir besoin. En outre, vous pouvez également modifier le rembourrage en utilisant CSS personnalisé.

0
répondu Akshay Ramesh 2017-10-24 09:21:16
<div class="container">
 <div class="row">
  <div class="col-md-6">
    <div class="bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
  <div class="col-md-6">
    <div class="bg-warning">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
    </div>
  </div>
</div>
</div>
0
répondu Sarfaraz Kasmani 2018-03-15 11:57:13