Como adiciono espaçamento entre colunas no Bootstrap?

202

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

Muhammed Bhikha
fonte

Respostas:

149

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

Ben
fonte
29
que funcionaria quando eu quero ficar com os tamanhos de coluna padrão, e se eu quiser um tamanho específico de espaçamento, em vez de compensar as colunas?
Muhammed Bhikha
3
Nesse caso, eu recomendaria usar os mixins fornecidos para ajustar as calhas das colunas: getbootstrap.com/css/#grid-less - O Bootstrap não faz o que você pede na pergunta, não pode "ajustar" as larguras da grade para responder espaçamento extra no meio porque é baseado em uma grade de pixels.
Ben
2
George - você tem as classes de deslocamento para isso. Mas se você achar as calhas embutidas insuficientes, tente compilar sua própria versão do bootstrap, seja com menos ou menos, dependendo das suas preferências. Você pode modificar as larguras e as calhas das colunas para corresponder ao seu site. Adicionar divs vazios não é muito ruim, o importante é encontrar algo que você (e / ou sua equipe) possa usar de forma consistente; se divs vazios é o caminho que você consegue, tudo bem; lembre-se de que sua marcação deve ser lida pelos desenvolvedores, não pelos usuários finais.
Ben
24
Este post não é uma resposta, cria uma lacuna muito maior do que o solicitado.
Sebastien
2
No Bootstrap 4, isso é offset-md-2 ou offset-2
Mahesh
318

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.

insira a descrição da imagem aqui

Utpal - Ur Melhor Amigo
fonte
principalmente devido às larguras da calha.
Utpal - Ur Best Pal
14
"larguras de sarjeta" refere-se ao espaçamento no preenchimento e nas margens definidas no núcleo do sistema de grade do bootstrap. Em resumo, adicionando uma segunda div comcol-xs-12 é o mesmo que adicionar um div comwidth:100%; padding:0px 15x;
mix3d
@ sixty4bit você poderia compartilhar seu código; talvez eu possa te ajudar.
Utpal - Ur Best Pal
isso seria ótimo @ Utpal-UrBestPal, obrigado! aqui está uma essência: gist.github.com/davidcpell/8d344ff18d5d188115c0ff9ba6ef7d14
sixty4bit
2
Se você estiver usando esta correção e ela não estiver funcionando, leia por que ela funciona na explicação do @ mix3d e você entenderá o que está fazendo de errado.
MauF 18/04/19
73

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

Robin Jonsson
fonte
Não realmente, porque você não pode usar row-eq-heightcom ele
Greg Woz
13

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>
Ali El Habchi
fonte
13

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

insira a descrição da imagem aqui

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.

Joe Fitzgibbons
fonte
11

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>
Amit
fonte
4
A semântica disso não é exatamente o que o @Muhammed está perguntando. Você está adicionando uma alteração na ordem das colunas com pull-left, pull-right.
Luchux
9

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>
User_3535
fonte
6

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>
S ..
fonte
1
Como uma margem inferior pode ser útil aqui?
Elisabeth
12
Eu intencionalmente entrei apenas para não gostar deste hack.
szdrnja
13
Eu intencionalmente efetuei login apenas para votar seu comentário sobre o intencionalmente logon apenas para não gostar deste hack.
Adam Spiers
Eu intencionalmente efetuei login apenas para votar seu comentário sobre o login propositalmente apenas para votar novamente o comentário sobre o login propositalmente para não gostar deste hack.
preto
5

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>

estani
fonte
O que funcionou melhor para mim (espaçamento vertical entre linhas) foi <div class="row mt-n4">e <div class="col-3 pt-4">.
Gavin
4

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>
Farac
fonte
4

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;

Ivan Djordevic
fonte
1
você poderia elaborar isso? ele não está funcionando para mim
Selva Ganapathi
2
@SelvaGanapathi você tem que recompilar depois de mudar estas variáveis: getbootstrap.com/docs/4.0/layout/grid/#customizing-the-grid
gbjbaanb
No Bootstrap 4, isso é offset-md-2 ou offset-2
Mahesh
2

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)

Laser One Jim
fonte
2

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

Hugo
fonte
1

é 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;
}
Mohamed Ahmed
fonte
8
você não usa vários IDs na mesma página, é totalmente falta de conhecimento de como usar o css. Use classes em vez disso.
LowFieldTheory
1

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.

Mark Libner
fonte
1

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>
drvictor666
fonte
0

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.

Brian
fonte
5
Bem-vindo ao estouro de pilha. Se você precisar de mais informações ou esclarecimentos sobre uma pergunta, use comentários em vez de respostas.
β.εηοιτ.βε
Se o fundo usasse uma imagem / textura em vez de cor sólida, isso seria óbvio.
Charles Watson
0

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>

Gleb Kemarsky
fonte
0

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

insira a descrição da imagem aqui

arulraj
fonte
0

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>
Jakub Stejskal
fonte
0
    <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;
}
RITHIN K
fonte
2
Um pouco de prosa sobre o que e por que pode ser útil.
Uwe Allner
0
<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.

Akshay R
fonte
0

Maneira simples

.row div{
  padding-left: 8px;
  padding-right: 8px;
}
Vladislav Koshenevskiy
fonte
0

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

col com espaçamento personalizado

frouo
fonte
0

insira a descrição da imagem aqui

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>

fonte
Talvez usar a resposta fornecida por @estani seja uma maneira mais "clássica" de fazer isso com o bootstrap4?
Sodimel 9/10/19
0

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.

WebDude0482
fonte
-1

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>
Sarfaraz Kasmani
fonte
-2

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

alanh
fonte
Não, isso não quebra a capacidade de resposta.
Crasher