Como adiciono espaçamento entre colunas no Bootstrap?

I'tenho a certeza que existe uma solução simples para este problema. Basicamente, se eu tenho 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 ao lado uma da outra ocupando toda a largura da página. Digamos que a largura estava definida para 1000px, então cada mergulho teria 500px de largura.

Se eu quisesse um espaço de 100px entre os dois, como poderia conseguir isso? Obviamente automaticamente através do bootstrap os tamanhos de mergulho tornar-se-iam 450px cada um para compensar o espaço

TylerH
Pergunta editada :em
Programação
css3 html css twitter-bootstrap-3 grid-layout
11º setembro 2013 в 10:27
5 vistas
Solução

Você pode conseguir espaçamento entre colunas utilizando as classes col-md-offset-*, documentadas aqui. O espaçamento é consistente para que todas as suas colunas se alinhem corretamente. Para obter espaçamento uniforme e tamanho de 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>
WindowsEscapist
Resposta editada :em
Comentários (5)

Eu sei I'estou atrasado para a festa, mas você poderia tentar espaçar as caixas com acolchoamento.

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

Experimente.

Comentários (1)

Isto permitirá um espaço entre as duas colunas e, obviamente, se você quiser alterar a largura padrão, você pode ir para mixins para modificar a largura padrão do bootstrap. Ou, você pode dar a largura usando o estilo CSS em linha.

<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
TylerH
Resposta editada :em
Comentários (1)