Bootstrap 3.1 visible-xs и visible-sm не работают вместе

У меня есть div, который я хочу показать на устройствах sm и xs, он выглядит так:

<div class="col-xs-4 col-sm-4 visible-xs visible-sm">
   <a href="#">Item 1</a>
   <a href="#">Item 2</a>
   <a href="#">Item 3</a>
</div>

Моя загрузочная загрузка загружается из cdn без какой-либо настройки.

Предполагается показать этот div на xs и sm, как указано в классах, но результат: класс sm display:none !important переопределяет xs display:block !important, когда вы переходите к размеру xs в браузере.

Я попытался выяснить в документации по загрузке, но у них есть только таблица, которая не объясняет, как использовать несколько параметров видимости в одном div.

Ответ 1

Если вы хотите показать его на нескольких размерах, не используйте visible-*, а вместо этого спрячьте другие размеры, которые вам не нужны, с помощью hidden-*. В этом случае: hidden-md hidden-lg

Ответ 2

Когда я сталкиваюсь с такими проблемами, я просто предпочитаю использовать собственный пользовательский медиа-запрос для управления видимостью элемента.

.someclass{
    display: none;
}

@media (max-width: 992px) {
   .someclass{
      display: normal!important;
   }
}

Или, если вы хотите повторно использовать это, затем определите пользовательский класс, например:

.visible-tablet-mobile{
    display: none;
}

@media (max-width: 992px) {
   .visible-tablet-mobile{
        display: normal!important;
   }
}

и повторно использовать его вместо того, чтобы давать свои классы видимости div два за раз.

Ответ 3

Вы должны добавить одно значение из:

`.visible-*-block` for `display: block;`
`.visible-*-inline` for `display: inline;`
`.visible-*-inline-block` for `display: inline-block;`

В этом случае у вас будет что-то вроде этого:

<div class="col-xs-4 col-sm-4 visible-xs-block visible-sm-block">

Следите за хорошей работой:)