Sono sicuro che esiste una soluzione semplice a questo problema. Fondamentalmente, se ho due colonne come posso aggiungere uno spazio tra loro?

ad esempio se l'html è:

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

L'output sarebbe semplicemente due colonne l'una accanto all'altra occupando l'intera larghezza della pagina. Supponiamo che la larghezza sia stata impostata su 1000pxquindi ogni div sarebbe 500pxampio.

Se avessi voluto uno 100pxspazio tra i due come avrei potuto farlo? Ovviamente automaticamente tramite bootstrap le dimensioni div diverrebbero 450pxciascuna per compensare lo spazio

Puoi ottenere la spaziatura tra le colonne usando le col-md-offset-*classi, documentate qui . La spaziatura è coerente in modo che tutte le colonne siano allineate correttamente. Per ottenere una spaziatura uniforme e le dimensioni della colonna, farei quanto segue:

<div class="row">
  <div class="col-md-5"></div>
  <div class="col-md-5 col-md-offset-2"></div>
</div>

In Bootstrap 4 usare: offset-2ooffset-md-2

Stavo affrontando lo stesso problema; e quanto segue ha funzionato bene per me. Spero che questo aiuti qualcuno che atterra qui:

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

Ciò renderà automaticamente dello spazio tra le 2 div.

So che sono in ritardo alla festa, ma potresti provare a spaziare le scatole con l'imbottitura.

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

Provaci

puoi usare la clip di sfondo e il modello box con la proprietà del bordo

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

Ho avuto problemi simili con lo spazio tra le colonne. Il problema alla radice è che le colonne in bootstrap 3 e 4 usano il padding invece del margine. Quindi i colori di sfondo per due colonne adiacenti si toccano.

Ho trovato una soluzione adatta al nostro problema e molto probabilmente funzionerà per la maggior parte delle persone che cercano di spaziare le colonne e mantenere le stesse larghezze di grondaia del resto del sistema a griglia.

Questo era il risultato finale che stavamo cercando

Avere il divario con un'ombra discendente tra le colonne era problematico. Non volevamo più spazio tra le colonne. Volevamo solo che le grondaie fossero "trasparenti" in modo che il colore di sfondo del sito apparisse tra due colonne bianche.

questo è il markup per le due colonne

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

Questo approccio richiede un div interno con margini negativi proprio come usa il bootstrap della classe "row". E questo div, lo abbiamo chiamato "blocco rialzato", deve essere il fratello diretto di una colonna

In questo modo si ottiene ancora un'imbottitura adeguata all'interno delle colonne. Ho visto soluzioni che sembrano funzionare creando spazio, ma sfortunatamente le colonne che creano hanno un'imbottitura extra su entrambi i lati della riga, quindi finisce per rendere la riga più sottile per cui è stato progettato il layout della griglia. Se guardi l'immagine per l'aspetto desiderato, ciò significherebbe che le due colonne insieme sarebbero più piccole di quella più grande in cima che rompe la struttura naturale della griglia.

Il principale svantaggio di questo approccio è che richiede un markup aggiuntivo che avvolge il contenuto di ciascuna colonna. Per noi questo funziona perché solo colonne specifiche avevano bisogno di spazio tra loro per ottenere l'aspetto desiderato.

Ciò consentirà uno spazio tra le due colonne e ovviamente se si desidera modificare la larghezza predefinita, è possibile utilizzare i mixin per modificare la larghezza predefinita del bootstrap. Oppure, puoi dare la larghezza usando lo stile CSS in linea.

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

Puoi ottenere la spaziatura tra le colonne usando le classi col-xs- *, all'interno di una div col-xs- * codificata sotto. La spaziatura è coerente in modo che tutte le colonne siano allineate correttamente. Per ottenere una spaziatura uniforme e le dimensioni della colonna, farei quanto segue:

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

Usa la .form-groupclasse bootstrap . In questo modo nel tuo caso:

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

Secondo la documentazione di Bootstrap 4 dovresti dare un margine negativo ai genitori mx-n*e ai bambini un'imbottitura positivapx-*

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
  <div class="col px-5">
    <div class="p-3 border bg-light">Custom column padding</div>
  </div>
</div>

All'interno di col-md- ?, crea un altro div e metti l'immagine in quel div, che puoi facilmente aggiungere imbottitura in questo modo.

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

Bootstrap 4 , file custom.scss è possibile aggiungere il seguente codice:

$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
);

per impostazione predefinita $ grid-gutter-width-base: 30px;

Ho dovuto capire come farlo per 3 colonne. Volevo arrotondare gli angoli dei div e non riuscivo a far funzionare la spaziatura. Ho usato i margini. Nel mio caso, ho calcolato che il 90% dello schermo doveva essere riempito dai div e il 10% per i margini:

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>

e 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%;
}

Per ridimensionarlo correttamente per i dispositivi mobili, ho dovuto modificare la larghezza del CSS dal 30% a width:92.5%;meno@media (max-width:1023px)

Dal momento che stai usando bootstrap , immagino che tu voglia rendere la cosa reattiva . In tal caso non dovresti usare dimensioni fisse, ad esempio in "px".

Come soluzione alternativa ad altre soluzioni, propongo di creare entrambe le colonne "col-md-5" invece di "col-md-6", quindi nell'elemento parent "row" che contiene le colonne, aggiungere la classe "justify-content -b Between ", che mette lo spazio libero nel mezzo, come puoi controllare nel documento bootstrap qui

Questa soluzione è valida anche per più di due colonne che regolano naturalmente "col-md-x"

spero che sia d'aiuto ;)

è semplice .. devi aggiungere un bordo solido a destra, da sinistra a col- * e dovrebbe funzionare ... :)

sembra così: 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;
}

So che questo post è un po 'datato ma mi sono imbattuto in questo stesso problema. Esempio del mio HTML.

<div class="row">
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="FirstName" class="control-label"></label>
            <input asp-for="FirstName" class="form-control" />
            <span asp-validation-for="FirstName" class="text-danger"></span>
        </div>
    </div>
    <div class="col-xs-3">
        <div class="form-group">
            <label asp-for="LastName" class="control-label"></label>
            <input asp-for="LastName" class="form-control" />
            <span asp-validation-for="LastName" class="text-danger"></span>
        </div>
    </div>            
</div>

Per creare spazio tra i gruppi ho scavalcato il margine di bootstrap di -15px nel mio file site.css riducendo il margine negativo di 5.

Ecco cosa ho fatto ...

.form-group {
    margin-right: -10px;
}

Spero che questo aiuti qualcun altro.

Avevo bisogno di una colonna sul cellulare e di due colonne dal tablet in verticale, con uguale spaziatura tra loro nel mezzo (anche senza alcuna imbottitura aggiunta alla griglia all'interno delle colonne). Potrebbe essere ottenuto utilizzando le utilità di spaziatura e omettendo il numero in col-md:

    <div class="container-fluid px-0">
        <div class="row no-gutters">
            <div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
            <div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
                <p><strong>Column 1</strong></p>
            </div>
        </div>
    </div>

Che ne dici di aggiungere un bordo dello stesso colore dello sfondo usando CSS? Sono nuovo di questo, quindi forse c'è una buona ragione per non farlo, ma sembrava buono quando l'ho provato.

Per ottenere una particolare larghezza di spaziatura tra le colonne, dobbiamo impostare paddingnel layout standard di 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>

Questo sarà 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>

Se l'uso desidera aumentare o ridurre l'ulteriore margine nella parte destra della casella, è sufficiente modificare la proprietà margine-destra della voce di elenco.

uscita campione

Solo un bordo bianco attorno all'elemento avvolgente

.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;
}

e primo + ultimo figlio senza bordo

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

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

<div class="col-md-6">
    <div class="inner">
        <!-- Put the col-6 elements in the inner div -->
    </div>
</div>

Questo per impostazione predefinita fornisce alcune imbottiture all'interno del div esterno nel modo in cui sembri aver bisogno. Inoltre puoi anche modificare il riempimento usando CSS personalizzato.

Modo semplice

.row div{
  padding-left: 8px;
  padding-right: 8px;
}

Bootstrap 4

La documentazione dice ( qui ):

Le righe sono wrapper per le colonne. Ogni colonna ha un'imbottitura orizzontale (chiamata grondaia) per controllare lo spazio tra di loro. Questa imbottitura viene quindi contrastata sulle file con margini negativi. In questo modo, tutto il contenuto delle colonne è visivamente allineato lungo il lato sinistro.

Quindi la risposta giusta è: imposta col'padding-left / right uguale a meno il tuo rowmargine-left / right. Così semplice.

#my-row {
  margin-left: -80px;
  margin-right: -80px;
}

#my-col {
  padding-left: 80px;
  padding-right: 80px;
}

Demo: https://codepen.io/frouo/pen/OqGaWN

Bootstrap 4: separa le colonne usando le righe nidificate.

<div class="container">
    <div class="row bg-info p-3">

        <!-- left column -->
        <div class="col-8 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>

        <!-- right column -->
        <div class="col-4 ">
            <div class="col-12 bg-light p-3">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
            </div>
        </div>
    </div>
</div>

Crea una classe e usa:

margine: 1,5 em. 5em; larghezza massima: calc (50% - 1em)! importante;

Dove 1em sulla larghezza massima è uguale al margine sinistro / destro sommati.

Anche questo è un modo di farlo e le sue opere. Si prega di controllare il seguente URL https://jsfiddle.net/sarfarazk/ofgqm0sh/

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

Usare margin-left è la strada da percorrere:

<div style="margin-left:-2px" class="col-md-6"></div>
<div style="margin-left:2px" class="col-md-6"></div>

funziona perfettamente

Con l'ultima versione di bootstrap, puoi usare "carte"