Utilize os recursos do bootstrap para isso, no seu caso, use os conceitos do grid system
O que é o Grid System?
Grid System é usado para criar layouts de páginas utilizando uma série de linhas e colunas, sua página será dividida em 12 colunas, que irão váriar de tamanho conforme a resolução do navegador.
Veja abaixo um exemplo prático da ideia:
.col {
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col col-xs-4">
Coluna ocupando 4 de 12 colunas
</div>
<div class="col col-xs-4">
Coluna ocupando 4 de 12 colunas
</div>
<div class="col col-xs-4">
Coluna ocupando 4 de 12 colunas
</div>
</div>
<div class="row">
<div class="col col-xs-6">
Coluna ocupando 6 de 12 colunas
</div>
<div class="col col-xs-2">
Coluna ocupando 2 de 12 colunas
</div>
<div class="col col-xs-2">
Coluna ocupando 2 de 12 colunas
</div>
<div class="col col-xs-2">
Coluna ocupando 2 de 12 colunas
</div>
<div class="col col-xs-5">
Coluna ocupando 5 de 12 colunas
</div>
</div>
Note que dividi o html em duas linhas (div
com a class row
);
- Na primeira linha defini 3 colunas e cada coluna ocupa o espaço de 4 colunas (
div
com a classe col-xs-4
) no sistema de grid (lembre que o layout é dividido em 12 colunas)
- Note que na segunda linha , defini mais que 12 colunas, foram 17 no total, sendo que a última, que não serviu automaticamente foi jogada para baixo, porém, ainda na mesma linha.
Configuração das resoluções
Agora, lembra que comentei que o Grid System é utilizado para tornar sua página responsiva? Então, você pode definir uma quantidade diferente de colunas em cada resolução, veja a definição:
lg
- Dispositivos grandes (desktops, >= 1200px)
md
- Dispositivos médios (desktops, >= 992px && < 1200px)
sm
- Dispositivos pequenos (tablets, >= 768px && < 992px)
xs
- Dispositivos extra pequenos (smartphones, < 768px)
Como usar as colunas por resolução?
Use os marcadores de resolução citados acima com a quantidade de colunas que deseja para cada resolução, veja um exemplo abaixo, vou definir
- 6 colunas para mobile
- 5 colunas para dispositivos pequenos
- 4 colunas para dispositivos médios
- 3 colunas para dispositivos grandes
A declaração da classe na div ficaria da seguinte maneira:
<div class="col-xs-6 col-sm-5 col-md-4 col-lg-3"></div>
Pode parecer um pouco complicado o Grid System à primeira vista, mas com o tempo você entende todo seu funcionamento e verá o quão mais rápido é criar layouts dessa maneira.
Há vários recursos na internet que explicam sobre esse recurso, e a dcoumentação também é bem clara (porém em Inglês), porém há muito conteúdo em português também, veja esse pra começar.