bootstrap 4 адаптивные утилиты видимые / скрытые xs sm lg не работают

96

Возникла проблема с новыми скрытыми / видимыми классами адаптивных утилит при переходе на Bootstrap 4 . Мне известно, что классы .hidden- были удалены из версии 3 и заменены на .hidden-*-up .hidden-*-down. Использование новых .hidden-*-up.hidden-*-downклассов, но элементы не меняются на видимые / скрытые. Не могу понять почему.

<div class="col hidden-xs-down">
    <span class="vcard">
        …
    </span>
</div>
<div class="col hidden-lg-down">
    <div class="hidden-sm-down">
                …
    </div>
    <div class="hidden-xs-down">
                …
    </div>
</div>

* в этом примере ничего не скрыто, независимо от размера экрана (Safari, режим адаптивного дизайна)

twitter-bootstrap  twitter-bootstrap-3  hide  hidden  twitter-bootstrap-4 
— Ятько
источник
2
И ваш вопрос в чем? stackoverflow.com/help/how-to-ask
— Роб
@Rob Fair;) изменилось.
— Ятько
Вы должны опубликовать минимальный пример разметки, вызывающей проблему: минимальный воспроизводимый пример Мы понятия не имеем, что такое «элементы».
— Роб
Установите кодовое окно, содержащее Bootstrap 4 и ваш пример HTML: codepen.io/esr360/pen/prWjYv . Ваше утверждение «в этом примере ничего не скрыто, независимо от размера экрана» неверно.
— ESR
@EdmundReed да, это сводит меня с ума: я попробовал на простом примере, работает на моем Mac, перестает работать сразу после синхронизации ... попробовал кеш, даже другой интернет-провайдер, чтобы исключить любое кеширование
— Ятко

Ответы:

227

С помощью Bootstrap 4 .hidden-* классы были полностью удалены (да, они были заменены, hidden-*-*но эти классы также исчезли из альфа- версии v4).

Начиная с версии 4-бета, вы можете комбинировать .d-*-noneи .d-*-blockклассы для достижения того же результата.

visible- * также был удален ; вместо использования явных .visible-*классов сделайте элемент видимым, не скрывая его (опять же, используйте комбинации .d-none .d-md-block). Вот рабочий пример:

<div class="col d-none d-sm-block">
    <span class="vcard">
        …
    </span>
</div>
<div class="col d-none d-xl-block">
    <div class="d-none d-md-block">
                …
    </div>
    <div class="d-none d-sm-block">
                …
    </div>
</div>

class="hidden-xs"становится class="d-none d-sm-block"(или d-none d-sm-inline-block ) ...

<span class="d-none d-sm-inline">hidden-xs</span>

<span class="d-none d-sm-inline-block">hidden-xs</span>

Пример отзывчивых утилит Bootstrap 4 :

<div class="d-none d-sm-block"> hidden-xs           
  <div class="d-none d-md-block"> visible-md and up (hidden-sm and down)
    <div class="d-none d-lg-block"> visible-lg and up  (hidden-md and down)
      <div class="d-none d-xl-block"> visible-xl </div>
    </div>
  </div>
</div>

<div class="d-sm-none"> eXtra Small <576px </div>
<div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> SMall ≥576px </div>
<div class="d-none d-md-block d-lg-none d-xl-none"> MeDium ≥768px </div>
<div class="d-none d-lg-block d-xl-none"> LarGe ≥992px </div>
<div class="d-none d-xl-block"> eXtra Large ≥1200px </div>

<div class="d-xl-none"> hidden-xl (visible-lg and down)         
  <div class="d-lg-none d-xl-none"> visible-md and down (hidden-lg and up)
    <div class="d-md-none d-lg-none d-xl-none"> visible-sm and down  (or hidden-md and up)
      <div class="d-sm-none"> visible-xs </div>
    </div>
  </div>
</div>

Документация

— Ятько
источник
1
Причина, по которой я не мог этого найти, бета-версия v4 была опубликована пару дней назад, и все результаты, проиндексированные Google, по-прежнему приводят вас к v4-alpha, каким-то образом я получил новую ссылку на CDN, но все остальное по-прежнему было -альфа
— Ятько
2
Я предполагаю, что "d" = display.
— user20232359723568423357842364
17
зачем они вводили такое неинтуитивное, критическое изменение? какое-нибудь объяснение?
— szaman
3
@rrrafalsz Я задавался вопросом о том же. Это похоже на излишне сложный шаг назад по сравнению с предыдущим «видимым-sm-вверх / вниз», который был в альфа-версии. Было бы интересно узнать причину.
— Katai
Не могли бы вы четко прокомментировать в своем примере, какие из DIV будут видны, а какие нет? Это заняло у меня время, и я не уверен, если я прокомментирую это, будет ли это правильно. спасибо
— helle
52

Класс размера экрана

-

  1. Скрыт на всех .d-none

  2. Скрыт только на xs .d-none .d-sm-block

  3. Скрыт только на sm .d-sm-none .d-md-block

  4. Скрыт только на md .d-md-none .d-lg-block

  5. Скрыт только на lg .d-lg-none .d-xl-block

  6. Скрыт только на xl .d-xl-none

  7. Виден на всех .d-блоках

  8. Виден только на xs .d-block .d-sm-none

  9. Виден только на sm .d-none .d-sm-block .d-md-none

  10. Виден только на md .d-none .d-md-block .d-lg-none

  11. Виден только на lg .d-none .d-lg-block .d-xl-none

  12. Виден только на xl .d-none .d-xl-block

Перейдите по этой ссылке http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Ссылка 4.5: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements

— Винод Чаухан
источник
1
Хотя теоретически это может дать ответ на вопрос, было бы предпочтительнее включить сюда основные части ответа и предоставить ссылку для справки.
— Rick
6

Bootstrap 4 (^ beta) изменил классы для гибкого скрытия / отображения элементов. См. Эту ссылку, чтобы узнать, какие классы использовать: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

— Jross
источник
2
Спасибо. Bootstrap может удалить старый контент, по крайней мере, для архивации, поэтому всем новичкам (например, мне) не нужно проходить через 123523532 возможных решений, прежде чем найти этот ответ в стеке. В последние несколько лет переполнение стека более полезно, чем google, поэтому, когда люди говорят использовать google ... я говорю нет, используйте стек ... Быстрее и полезнее.
— Blue
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.