Приветствую. Есть хедер, в нем лого и две картинки в ряду с надписью. Пытаюсь с помощью бутстраповской сетки сделать адаптивные блоки, чтобы они красиво складывались между собой. колдую с отступами col-sm-offset-1
, но почему-то не применяется и на малом изображении блоки как-то непонятно группируются между собой, вместо того, что располагаться один под одним по центру.
Пример в фидл
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<header>
<div class="container">
<div class="row">
<div class="col-sm-6 header-logo">
<div class="pull-left">
<a class="navbar-brand" href="/">
<img src="http://placehold.it/100x100">
</a>
</div>
<h4>текст</h4>
<div class="clear"></div>
</div>
<!-- end col-sm-6 -->
<div class="col-sm-offset-1 col-sm-2">
<div class="pull-left">
<img src="http://placehold.it/50x50">
</div>
<div class="clear"></div>
</div>
<div class="col-sm-3">
<span class="table">
<div class="pull-left"><img src="http://placehold.it/50x50"></div>
<span class="cell">еще текст</span>
<div class="clear"></div>
</span>
<div class="clear"></div>
</div>
<!-- end col-sm-6 -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</header>