Vamos por partes.
Grid no bootstrap:
Até a versão 3.3.7 Veja a documentação em pt-BR da versão 3.3.7 para ter uma base
Na versão 3.3.7 o bootstrap divide a tela em 12 partes iguais, mas usa porcentagem para que seja renderizado para cada tipo de tela. O cálculo é bem simples de fazer é a quantidade de elementos divido pela quantidade total, exemplo?
Vamos imaginar que a tela terá 12 espaços e você queira saber o tamanho de cada espaço.
1 / (12 * 100) = 8.333% então cada parte terá este tamanho en relação ao tamanho de tela.
Imaginemos que temos uma linha class="row"
e queremos colocar nela 2 partes amarela e 10 partes azuis, colori a linha de vermelha para poder diferenciar.
<div class="row alert alert-danger">
<div class="col col-md-2 alert alert-warning"> </div>
<div class="col col-md-10 alert alert-info"> </div>
</div>
Tendo o seguinte resultado:
Usei col-md-
, para exemplificar mas o bootstrap
trabalha com 4 definições diferentes para cada tamanho de tela, conforme tabela abaixo
- col-xs para telas < 768px;
- col-sm para telas >= 768px;
- col-md para telas > 992px;
- col-lg para telas > 1200px;
Ambos com grid de 12 espaços
É comum trabalhar com 2 colunas em dispositivos maiores que 992px col-md-2
e na mesma div com 4 colunas para dispositivos com telas menores que 768px col-xs-4
, ficando dessa forma o código.
<div class="col-md-2 col-xs-4"></div>
Usando desta forma o bootstrap renderiza usando @media para que fique responsivo.
/* telas pequenas (smarphones com resoluções menores que 768px) */
@media (min-width: @screen-sm-min) { ... }
/* Telas maiores que 992px) */
@media (min-width: @screen-md-min) { ... }
Desta forma o desenvolvedor só precisa se preocupar em seguir a tabela abaixo.
Abaixo reproduzi a sua tela e a tela que eu imagino que seria a ideal, e após este exemplo falo sobre o bootstrap 4 alpha 6.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<h1 class="alert alert-danger">
Este é o seu código
</h1>
<div class="row"> <!-- altera para row-fluid e o probelma desaperece -->
<div class="span12">
Fluid 12
<div class="row-fluid">
<div class="span6">
Fluid 6
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
<br>
<h1 class="alert alert-warning">
Esse deve ser o resultado que você esperava
</h1>
<div class="row"> <!-- altera para row-fluid e o probelma desaperece -->
<div class="col col-md-12 alert alert-warning">
Fluid 12
<div class="row">
<div class="col col-md-6 alert alert-success">
Fluid 6
<div class="row">
<div class="col col-md-6 alert alert-danger">Fluid 6</div>
<div class="col col-md-6 alert alert-info">Fluid 6</div>
</div>
</div>
<div class="col col-md-6 alert alert-danger">Fluid 6</div>
</div>
</div>
</div>
Bootstrap v4 alpha6## veja o manual sobre as grids, mas a documentação ainda não está traduzida.
Já na versão 4 alpha 6 o bootstrap abandona o modelo de grip renderizado por espaços e implementa o flexbox
deixando mais fácil pratico e organizado o código.
Nesse bootstrap não existe mais col-xs
agora ele passou a ser somente col-
, conforme nova tabela de grid.
Opções de grid
Enquanto o Bootstrap usa em
ou rem
para definir a maioria dos tamanhos, os pxs
são usados para pontos de interrupção da grade e larguras de contêineres. Isso ocorre porque a largura da janela de exibição está em pixels e não muda com o tamanho da fonte, ou seja as fontes deixaram de ser usadas em px
nesta versão e usarão somente em
ou rem
para definir as fontes e as mesmas manterem um proporção de tamanho (podendo ser maior ou menor, depende do tamanho da tela).
No mais ele trabalha da mesma forma nos nomes de classes.