Ответ 1
Как сказал Джакен, если вы используете Bootrstrap 3, вместо этого вы должны использовать hidden-sm
.
Кроме того, если вы хотите скрыть изображение на маленьком экране, вам нужно добавить hidden-xs
.
Здесь JsFiddle: DEMO
Я использую 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>
Как сказал Джакен, если вы используете Bootrstrap 3, вместо этого вы должны использовать hidden-sm
.
Кроме того, если вы хотите скрыть изображение на маленьком экране, вам нужно добавить hidden-xs
.
Здесь JsFiddle: DEMO
Вы упомянули, что используете Bootstrap 3
Используйте hidden-sm
вместо hidden-sm-down
который принадлежит Bootstrap 4
На стороне примечание:
Вы также отмечаете:
Я хочу скрыть эти два изображения на небольших устройствах, чтобы иметь другое меню.
hidden-sm
скроет элемент на небольших экранах, таких как iPad. Чтобы спрятаться на дополнительных маленьких экранах (например, телефоны <768px), добавьте hidden-xs
.
Взгляните на таблицу размеров Bootstrap здесь
На самом деле, hidden-sm-down
не будет работать с BS4
С BS4 классы утилиты дисплея полностью изменены. Используйте этот формат;
.d-{breakpoint}-{value}
Больше информации; https://getbootstrap.com/docs/4.0/utilities/display/