Блог

Главная - Вопросы по программированию - Div не прячется с классом попутного ветра

Div не прячется с классом попутного ветра

#css #tailwind-css

Вопрос:

У меня возникли проблемы с попыткой скрыть какой-то div с попутным ветром

У меня есть два дива, но оба отображаются на настольных и мобильных устройствах

Div 1: должен отображаться на рабочем столе и скрываться на мобильном устройстве.

 <div class="hidden md:block" style="margin-bottom":5px></div>

Div 2: нужно показывать на мобильном устройстве и скрывать на рабочем столе:

 <div class="hidden lg:block" style="margin-bottom":5px></div>

Ответ №1:

Чтобы применить утилиту видимости только в определенной точке останова, добавьте префикс {screen} : к существующему имени класса. Например, добавление класса md:invisible к элементу приведет к применению невидимой утилиты при средних размерах экрана и выше.

https://tailwindcss.com/docs/visibility#responsive

1

Это скрыто на мобильном устройстве, но видно на рабочем столе.

 <div class="invisible md:visible"></div>

2

Это видно на мобильном устройстве, но скрыто на рабочем столе.

 <div class="visible md:invisible ..."></div>
 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel="stylesheet" />
<div class="invisible md:visible">
  Visible on desktop
</div>


<div class="visible md:invisible">
  Visible on mobile
</div>

Вы можете использовать lg вместо md .

Комментарии:

1. Я просмотрел это и не работает, похоже, что это работает, потому что Google отображал только одно добавление, а другое оставлял пустым. Но все равно появляются оба дива

2. @SEVENELEVEN вы можете использовать более старую версию tailwinds. Запустите фрагмент кода и измените размер браузера, посмотрите, работает ли он.

Метки: