@ligisayan

Почему не скрывается блок в bootstrap (hidden-md hidden-lg)?

Всем привет! Есть блок с 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 В чем причина и как это исправить?
  • Вопрос задан
  • 385 просмотров
Решения вопроса 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
у тебя на md не заданы стили для самих блоков.
https://jsfiddle.net/DTcHh/36574/
т.е. после lg у тебя сразу идет sm - в котором блоки по 2 в строке.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы