Quero alinhar elementos no grid, mas ele ficam um em cima do outro quando coloco.
Tentei usar float: left
, a princípio funciona, mas quando a tela fica pequena fica tudo bagunçado, as imagens ficam fora da div
.
Segue o código de exemplo:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- - - - - - - - - - - - - - - -->
<div class="col-sm-3 col-sm-offset-1" style="border:1px solid red;">
<p style="text-align:center;"><b>Imagens</b></p>
<img src="http://lorempixel.com/50/50/" class="img-responsive pull-left " width="50px">
<img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
<img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
<img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
</div>
<div class="col-sm-3 col-sm-offset-1" style="border:1px solid red;">
<p style="text-align:center;"><b>Imagens</b></p>
<img src="http://lorempixel.com/50/50/" class="img-responsive pull-left " width="50px">
<img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
<img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
<img src="http://lorempixel.com/50/50/" class="img-responsive pull-left" width="50px">
</div>