Подтвердить что ты не робот

Bootstrap hidden-sm-down не работает

Я использую Boostrap 3. Почему <div> со hidden-sm-down все еще отображается, когда я изменяю размер страницы на своем ноутбуке? Я хочу скрыть эти два изображения на небольших устройствах, чтобы иметь другое меню.

<div class="row">                 
    <div class="col-md-7 left">
        <ul class="row">
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-3">
                <a href="">Text</a>
            </li>
            <li class="col-md-2">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down wave">
        <img src="img/ondina.png" />
    </div>
    <div class="col-md-3 right">
        <ul class="row">
            <li class="col-md-6">
                <a href="">Text</a>
            </li>
            <li  class="col-md-6">
                <a href="">Text</a>
            </li>
        </ul>
    </div>
    <div class="col-md-1 hidden-sm-down right-border">
        <img src="img/menu-right.png"  />
    </div>
</div>
4b9b3361

Ответ 1

Как сказал Джакен, если вы используете Bootrstrap 3, вместо этого вы должны использовать hidden-sm.

Кроме того, если вы хотите скрыть изображение на маленьком экране, вам нужно добавить hidden-xs.

Здесь JsFiddle: DEMO

Ответ 2

Вы упомянули, что используете Bootstrap 3

Используйте hidden-sm вместо hidden-sm-down который принадлежит Bootstrap 4

На стороне примечание:

Вы также отмечаете:

Я хочу скрыть эти два изображения на небольших устройствах, чтобы иметь другое меню.

hidden-sm скроет элемент на небольших экранах, таких как iPad. Чтобы спрятаться на дополнительных маленьких экранах (например, телефоны <768px), добавьте hidden-xs.

Взгляните на таблицу размеров Bootstrap здесь

Ответ 3

На самом деле, hidden-sm-down не будет работать с BS4

С BS4 классы утилиты дисплея полностью изменены. Используйте этот формат;

.d-{breakpoint}-{value}

Больше информации; https://getbootstrap.com/docs/4.0/utilities/display/