Tenho certeza de que existe uma solução simples para esse problema. Basicamente, se eu tiver duas colunas, como posso adicionar um espaço entre elas?

por exemplo, se o html for:

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

A saída seria simplesmente duas colunas próximas uma da outra, ocupando toda a largura da página. Digamos que a largura foi definida para 1000pxque cada div seja 500pxlarga.

Se eu quisesse um 100pxespaço entre os dois, como conseguir isso? Obviamente, automaticamente, através do bootstrap, os tamanhos de div se tornariam 450pxcada um para compensar o espaço

Você pode obter espaçamento entre colunas usando as col-md-offset-*classes, documentadas aqui . O espaçamento é consistente para que todas as suas colunas estejam alinhadas corretamente. Para obter espaçamento uniforme e tamanho da coluna, eu faria o seguinte:

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

No Bootstrap 4, use: offset-2ouoffset-md-2

Eu estava enfrentando o mesmo problema; e o seguinte funcionou bem para mim. Espero que isso ajude alguém a desembarcar aqui:

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

Isso renderizará automaticamente algum espaço entre os 2 divs.

Sei que estou atrasado para a festa, mas você pode tentar espaçar as caixas com estofamento.

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

Faça uma tentativa

você pode usar o clipe de fundo e o modelo de caixa com propriedades de borda

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

Eu tive problemas semelhantes com o espaço entre as colunas. O problema principal é que as colunas no bootstrap 3 e 4 usam preenchimento em vez de margem. Portanto, as cores de fundo de duas colunas adjacentes se tocam.

Encontrei uma solução que se encaixa no nosso problema e provavelmente funcionará para a maioria das pessoas que tentam espaçar colunas e manter as mesmas larguras de sarjeta que o resto do sistema de grade.

Este foi o resultado final que estávamos buscando

Ter o espaço com uma sombra entre colunas era problemático. Não queríamos espaço extra entre as colunas. Só queríamos que as sarjetas fossem "transparentes" para que a cor de segundo plano do site aparecesse entre duas colunas brancas.

esta é a marcação para as duas colunas

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

Essa abordagem exige uma div interna com margens negativas, como a classe "row" da inicialização. E essa div, que chamamos de "bloco elevado", deve ser o irmão direto de uma coluna

Dessa forma, você ainda obtém o preenchimento adequado dentro de suas colunas. Vi soluções que parecem funcionar criando espaço, mas infelizmente as colunas que eles criam têm preenchimento extra em ambos os lados da linha, então isso acaba tornando a linha mais fina para a qual o layout da grade foi projetado. Se você olhar a imagem para a aparência desejada, isso significaria que as duas colunas juntas seriam menores que a maior no topo, que quebra a estrutura natural da grade.

A principal desvantagem dessa abordagem é que ela requer marcação extra, envolvendo o conteúdo de cada coluna. Para nós, isso funciona porque apenas colunas específicas precisavam de espaço entre elas para obter a aparência desejada.

Isso permitirá um espaço entre as duas colunas e, obviamente, se você deseja alterar a largura padrão, você pode usar os mixins para modificar a largura padrão da inicialização. Ou, você pode dar a largura usando o estilo CSS embutido.

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

Você pode obter o espaçamento entre colunas usando as classes col-xs- *, em uma div col-xs- * codificada abaixo. O espaçamento é consistente para que todas as suas colunas estejam alinhadas corretamente. Para obter espaçamento uniforme e tamanho da coluna, eu faria o seguinte:

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

Use a .form-groupclasse do bootstrap . Assim no seu caso:

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

De acordo com o Bootstrap 4 documentação do , você deve dar aos pais uma margem negativa mx-n*e aos filhos um preenchimento positivopx-*

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

Dentro do col-md-?, Crie outra div e coloque uma imagem nessa div, para que você possa adicionar facilmente preenchimento dessa maneira.

<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 , arquivo custom.scss, você pode adicionar o seguinte código:

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

por padrão, $ grid-gutter-width-base: 30px;

Eu tive que descobrir como fazer isso por 3 colunas. Eu queria dobrar os cantos dos divs e não consegui que o espaçamento funcionasse. Eu usei margens. No meu caso, calculei que 90% da tela fosse preenchida pelos divs e 10% para as margens:

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

Para redimensionar corretamente os dispositivos móveis, o CSS alterou a largura de 30% para width:92.5%;menos de@media (max-width:1023px)

Desde que você está usando o bootstrap , acho que você deseja tornar a coisa responsiva . Nesse caso, você não deve usar tamanhos fixos, em 'px', por exemplo.

Como solução alternativa para outras soluções, proponho criar as duas colunas "col-md-5" em vez de "col-md-6" e, em seguida, no elemento pai "linha" que contém as colunas, adicione a classe "justify-content -between ", que coloca o espaço livre no meio, como você pode verificar no documento de auto-inicialização aqui

Esta solução também é válida para mais de duas colunas, ajustando o "col-md-x", é claro

espero que ajude ;)

é simples .. você tem que adicionar borda sólida direita, esquerda para col- * e deve dar certo .. :)

fica assim: 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;
}

Eu sei que este post é um pouco datado, mas me deparei com esse mesmo problema. Exemplo do meu 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>

Para criar espaço entre os grupos, substitui a margem de inicialização de -15px no arquivo site.css, reduzindo a margem negativa em 5.

Aqui está o que eu fiz ...

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

Espero que isso ajude outra pessoa.

Eu precisava de uma coluna no celular e duas colunas do tablet para cima, com espaçamento igual entre elas no meio (também sem nenhum preenchimento adicionado à grade dentro das colunas). Pode ser alcançado usando utilitários de espaçamento e omitindo o número em 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>

Que tal apenas adicionar uma borda da mesma cor que o plano de fundo usando css? Eu sou novo nisso, então talvez haja uma boa razão para não, mas parecia bom quando eu tentei.

Para obter uma largura específica de espaçamento entre colunas, precisamos configurar paddingo layout padrão do 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>

Isso será útil ..

.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 você quiser aumentar ou diminuir mais margem no lado direito da caixa, basta editar a propriedade margem-direita do item de lista.

saída de amostra

Apenas borda branca ao redor do elemento wrap

.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 primeiro + último filho sem borda

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

Por padrão, isso fornece algum preenchimento dentro da div externa da maneira que você parece precisar. Além disso, você também pode modificar o preenchimento usando CSS personalizado.

Maneira simples

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

Bootstrap 4

A documentação diz ( aqui ):

Linhas são wrappers para colunas. Cada coluna possui preenchimento horizontal (chamado calha) para controlar o espaço entre elas. Esse preenchimento é neutralizado nas linhas com margens negativas. Dessa forma, todo o conteúdo de suas colunas é visualmente alinhado no lado esquerdo.

Portanto, a resposta certa é: defina cols 'padding-left / right igual a menos sua rowmargem-esquerda / direita. Que simples.

#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 - Separe as colunas usando linhas aninhadas.

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

Crie uma classe e use:

margem: 1.5em .5em; max-width: calc (50% - 1em)! importante;

Onde 1em na largura máxima é igual à margem esquerda / direita somadas.

Esta também é uma maneira de fazê-lo e suas obras. Verifique o seguinte 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>

Usar a margem esquerda é o caminho a seguir:

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

funciona perfeitamente

Com a versão mais recente do bootstrap, você pode usar "cards"