Есть блок с 4 элементами в сетке bootstrap
которые отличаются по содержанию, а значит и по высоте. Фидл
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div class="section-content">
<div class="row">
<div class="feature-item col-lg-3 col-sm-6 wow slideInUp" style="visibility: visible;">
<div class="feature-media">
<img src="http://placehold.it/112x112" width="112" height="112" alt="текст" title="текс">
</div>
<h4>Текст</h4>
<div class="feature-item-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500. Lorem Ipsum has been the industry's standard dummy</div>
</div>
<div class="feature-item col-lg-3 col-sm-6 wow slideInUp" style="visibility: visible;">
<div class="feature-media">
<img src="http://placehold.it/112x112" width="112" height="112" alt="текст" title="текс">
</div>
<h4>Текст</h4>
<div class="feature-item-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy</div>
</div>
<div class="clearfix hidden-md hidden-lg"></div>
<div class="feature-item col-lg-3 col-sm-6 wow slideInUp" style="visibility: visible;">
<div class="feature-media">
<img src="http://placehold.it/112x112" width="112" height="112" alt="текст" title="текс">
</div>
<h4>Текст</h4>
<div class="feature-item-content">Lorem Ipsum is simply</div>
</div>
<div class="feature-item col-lg-3 col-sm-6 wow slideInUp" style="visibility: visible;">
<div class="feature-media">
<img src="http://placehold.it/112x112" width="112" height="112" alt="текст" title="текс">
</div>
<h4>Текст</h4>
<div class="feature-item-content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500. Lorem Ipsum has been</div>
</div>
</div>
Хочу добиться правильного отображения на всех разрешениях экранов, но элементы соскакивают на следующую строку с пустотами. Пробую исправить отображение с помощью
<div class="clearfix hidden-md hidden-lg"></div>
Но, блок почему-то не скрывается на экранах размеров md
и lg
В чем причина и как это исправить?
Ха, как интересно, - вот такое изменение в блоках не сработало
<div class="feature-item col-sm-6 col-md-3 col-lg-3 wow slideInUp" style="visibility: visible;">
А вот так - дало нужный эффект!
<div class="feature-item col-sm-6 col-md-3 wow slideInUp" style="visibility: visible;">
Виртуальный выделенный сервер (VDS) становится отличным выбором
Как разместить div в конце последней строки текста произвольной длины?
У меня есть html документ, который содержит примерно 20 картинокВсе эти файлы лежат в одной папке
Kак многостраничники верстают? С лендингами все ясноИнтересуют переходы по ссылкам, например, в навигационном меню header