Не скрывается блок в bootstrap (hidden-md hidden-lg)

354
31 августа 2017, 17:44

Есть блок с 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 В чем причина и как это исправить?

Answer 1

Ха, как интересно, - вот такое изменение в блоках не сработало

<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;">
READ ALSO
Разместить div в конце строки (обтекание)

Разместить div в конце строки (обтекание)

Как разместить div в конце последней строки текста произвольной длины?

287
Можно ли совместить html и картинки в один файл?

Можно ли совместить html и картинки в один файл?

У меня есть html документ, который содержит примерно 20 картинокВсе эти файлы лежат в одной папке

448
Так и должно быть?

Так и должно быть?

При получении JSON данных из php, JSON попадает в html

301
Верстка многостраничника - HTML

Верстка многостраничника - HTML

Kак многостраничники верстают? С лендингами все ясноИнтересуют переходы по ссылкам, например, в навигационном меню header

301