Bootstrap видимые и скрытые классы не работают должным образом

Я попытался использовать классы Bootstrap visible и hidden для создания содержимого, видимого только на мобильном/рабочем столе. Я заметил, что классы не работают должным образом (и я заметил, что многие люди столкнулись с этой проблемой и решили это так), поэтому я создал мобильную таблицу стилей, чтобы установить, какой из divs будет отображаться на мобильных устройствах.

Это мой текущий код:

<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
    </div>
  </div>
</div>

<div class="mobile">
  test
</div>

Теперь .mobile должен быть виден на мобильных экранах, ширина 900 пикселей и меньше. Я использовал классы Bootstrap для другого div, .containerdiv, и это работает до сих пор, но только когда я добавил значение для hidden-xs в моем собственном листе мобильных CSS, например:

.hidden-xs {
  display:none !important;
}
.mobile {
  display:block !important;
}

Теперь div .mobile должен отображаться на экранах 900px или меньше, но он по-прежнему не работает. Я не уверен, почему это не так, display:block правильная вещь для правильного использования? Добавление visible-xs и visible-sm ничего не делает.

Каков правильный способ сделать это и почему моя версия не работает?

Ответ 1

В вашем .mobile div есть следующие стили:

.mobile {
    display: none !important;
    visibility: hidden !important;
}

Поэтому вам необходимо переопределить свойство visibility с помощью visible в дополнение к переопределению свойства display с помощью block. Например:

.visible-sm {
    display: block !important;
    visibility: visible !important;
}

Ответ 2

Не требуется CSS, видимый класс должен это сделать: visible-md-block не просто visible-md, а код должен выглядеть примерно так:

<div class="containerdiv hidden-sm hidden-xs visible-md-block visible-lg-block">
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">

        </div>
    </div>
</div>

<div class="mobile hidden-md hidden-lg ">
    test
</div>

Дополнительный css не требуется вообще.

Ответ 3

Ваш мобильный класс неверен:

.mobile {
  display: none !important;
  visibility: hidden !important; //This is what keeping the div from showing, remove this.
}

Ответ 4

Если вы укажете свойство display table в css, некоторый скрытый класс boot boot не будет влиять на этот div

Ответ 5

На сегодняшний день ноябрь 2017
Bootstrap v4 - betap >

Отзывчивые утилиты

Все @экранные переменные были удалены в версии 4.0. Используйте вместо этого только Sass-карту только те точки, где вы выбрали точки прерывания(), media-breakpoint-down() или media-breakpoint-only() Sass, или вместо Sass map.

Удалено из v3:.hidden-xs .hidden-sm.hidden-md.hidden-lg.visible-xs-block.visible-xs-inline.visible-xs-inline-block.visible-sm-block.visible-sm-inline.visible-sm-inline-block.visible-md-block.visible-md-inline.visible-md-inline-block.visible-lg-block.visible-lg -inline.visible-lg-inline-block

Удалено из v4 alphas:.hidden-xs-up.hidden-xs-down.hidden-sm-up.hidden-sm-down.hidden-md-up.hidden-md-down.hidden-lg-up.hidden-Л.Г. вниз

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities