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