завантажувальна програма 4 видимих ​​утиліти видимих ​​/ прихованих xs sm lg не працює


96

Виникла проблема з новими адаптивними утилітами, прихованими / видимими класами , під час переходу на Bootstrap 4 . Мені відомо, що .hidden- класи було вилучено з v3 і замінено на .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, режим адаптивного дизайну)


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 alphas).

Починаючи з v4-beta, ви можете комбінувати .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, але все інше все ще було
-alpha

2
Я припускаю, що "d" = display.
user20232359723568423357842364

16
навіщо їм запроваджувати таку неінтуїтивну, зламану зміну? будь-яке пояснення?
szaman

3
@rrrafalsz Я дивувався про те саме. Це здається непотрібним складним кроком назад від попереднього "видимого см-вгору / вниз", який вони мали в альфа-версії. Було б цікаво дізнатись причину.
Katai

Чи можете ви чітко прокоментувати у своєму прикладі, які з DIV будуть видимими, а які ні? Це зайняло у мене деякий час, і я не впевнений, якщо я це прокоментую, чи це буде правильно. подяка
helle

51

Клас розміру екрану

-

  1. Приховано на всіх .d-none

  2. Приховано лише на xs .d-none .d-sm-block

  3. Приховано лише на блоці sm .d-sm-none .d-md

  4. Приховано лише на блоці md .d-md-none .d-lg

  5. Приховано лише на lg .d-lg-none .d-xl-блоці

  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-блоці

Перейдіть за цим посиланням http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

4.5 посилання: https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements


1
Хоча це теоретично може дати відповідь на питання, переважно було б включити сюди основні частини відповіді та надати посилання для довідки.
Рік

6

Bootstrap 4 (^ бета) змінив класи для адаптивного приховування / показу елементів. Дивіться це посилання для використання правильних класів: http://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements


2
Дякую. Bootstrap міг видалити старий вміст, принаймні, щоб заархівувати, тому загальний номер (як я) не повинен пройти 123523532 можливих рішень, перш ніж знайти цю відповідь у стеку. Останні кілька років переповнення стека корисніше, ніж google, тому, коли люди кажуть використовувати google ... я кажу ні, використовуйте стек .. Швидше і корисніше.
Синій

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.