css — Display:none не отображается с display:block в точке останова
спросил
Изменено 1 год, 9 месяцев назад
Просмотрено 582 раза
Извините, я знаю, что об этом уже спрашивали, но я просто не могу понять, почему это не работает!
У меня есть окно просмотра метатегов в голове
У меня дисплей : нет значка (полосы) в широких окнах просмотра (я начал оттуда), и он должен отображаться в меньшем размере, когда меню исчезает. (исчезновение меню работает)
Я установил display:block
My SCSS:
.fa-bars { дисплей: нет; } Экран @media и (максимальная ширина: 600 пикселей) { .контейнер { .fa-бары { дисплей: блок; } } }
Но не работает не знаю почему пытался выбрать его только *i*, с классом
- css
- медиа-запросы
- точки останова
- показать-скрыть
- показать
В вашем медиа-запросе это не сработает:
.container{ .fa-бары{ дисплей: блок; } }
Должно быть:
.container .fa-bars { дисплей:блок; }
… если важно, чтобы .fa-bars был в .containers.
В противном случае все будет в порядке:
.fa-bars { дисплей:блок; }
нужен SCSS
для гнездовых блоков,
попробуйте сделать это так:
.fa-bars{ дисплей: нет; } Экран @media и (max-width:600px){ .container.fa-бары { дисплей: блок; }
Включите оба в медиа-запросы и исправьте синтаксис CSS. попробуйте это:
@media screen и (min-width:601px){ .fa-бары{ дисплей: нет; } } Экран @media и (max-width:600px){ .container .fa-bars{ дисплей: блок; } }
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google Зарегистрироваться через Facebook Зарегистрируйтесь, используя электронную почту и парольОпубликовать как гость
Электронная почтаТребуется, но не отображается
Опубликовать как гость
Электронная почтаТребуется, но не отображается
Настройки дисплея | Webflow University
Домашний урок
Все уроки
Настройте свойства отображения, чтобы определить основное поведение макета элемента.
макет-дизайн
У этого видео старый пользовательский интерфейс. Скоро будет обновленная версия!
Параметры отображения, расположенные на панели «Стиль», управляют поведением макета элемента и содержимым вокруг этого элемента. Здесь вы можете контролировать, как элементы отображаются по отношению друг к другу — расположены ли они друг над другом или расположены рядом.
В этой статье мы рассмотрим каждый параметр отображения на панели «Стиль»:
- Блок
- Flexbox
- Сетка
- Встроенный блок
- Встроенный
- Отображение: нет
Блок — это параметр отображения по умолчанию для большинства элементов. Каждый элемент блока начинается с новой строки и занимает всю ширину своего родительского элемента, если не задана пользовательская ширина.
Независимо от ширины каждый элемент блока будет помещать следующий элемент на новую строку. Чтобы расположить элементы рядом, выберите другой параметр макета, например встроенный блок.
FlexboxЭлементы с гибкой компоновкой располагают своих прямых дочерних элементов горизонтально или вертикально.
Вы можете настроить, как укладываются прямые дочерние элементы, когда они переносятся, как они выравниваются и выравниваются внутри гибкого контейнера.
При создании гибкого контейнера все непосредственные дочерние элементы этого родительского элемента становятся гибкими дочерними элементами. Вы можете добавить и переопределить макет дочерних элементов flex в настройках дочернего элемента flex.
Узнайте больше о гибких макетах.
СеткаЭлементы с сеткой располагают своих непосредственных дочерних элементов по нескольким столбцам и строкам.
Можно настроить расположение, выравнивание и распределение непосредственных дочерних элементов в компонентах сетки: контейнере, отдельных ячейках, группе ячеек или дорожках.
В макетах сетки можно указать промежутки между столбцами и строками, называемые дорожками. Вы также можете использовать модуль FR для создания полностью плавных макетов сетки.
Настройки дочерних элементов сетки отображаются в верхней части панели «Стиль», когда выбран дочерний элемент контейнера сетки. Они позволяют переопределить настройки контейнера сетки для выравнивания и выравнивания.
Узнайте больше о сетке.
Сетка против FlexFlexbox и сетка — отличные варианты компоновки. Flexbox дает вам элементы управления макетом в одном измерении — вертикальном или горизонтальном. Сетка дает вам элементы управления макетом, которые работают в двух измерениях, что отлично подходит, например, для журнальных макетов.
Для получения более подробной информации о каждом варианте макета, различиях между ними и о том, когда вы можете захотеть использовать один вместо другого, посмотрите наш видеоурок о флексбоксе и сетке.
Встроенный блокЭлементы встроенного блока располагаются рядом друг с другом, а их ширина определяется содержимым внутри.
Элементы встроенного блока также будут переноситься, когда содержимое достигает границы родительского элемента. На панели «Стиль» вы можете применить определенные параметры ширины, высоты, отступов и полей к элементам встроенного блока.
Распространенная проблема при использовании встроенных блочных элементов заключается в том, что пробелы в HTML становятся визуальным пространством в дизайне сайта. Узнайте, как исправить проблемы с пробелами . ВстроенныйВстроенный — это параметр отображения по умолчанию для любого текстового содержимого внутри элемента. Вы можете изменить макет встроенного элемента, изменив его поля и отступы, но вы не можете изменить его ширину или высоту.
Отображение: нетЧтобы полностью скрыть элемент, установите его настройку отображения на нет.
Элементы, настроенные для отображения none, не будут отображаться браузером, что может быть удобно для изменения способа отображения контента на мобильных устройствах.