Содержание

Свойство отображения · Bootstrap v5.1

Как это устроено

Измените значение свойства display property с помощью наших вспомогательных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display. Классы можно комбинировать для получения различных эффектов по мере необходимости.

Обозначение

Утилиты отображения классов, которые применяются ко всем контрольным точкам, от xs до xxl, не имеют в себе аббревиатуры контрольной точки. Это потому, что эти классы применяются начиная с min-width: 0; и выше, и поэтому не связаны медиа-запросами. Остальные контрольные точки, однако, содержат аббревиатуру контрольной точки.

Таким образом, классы именуются в следующем формате:

  • .d-{value} для xs
  • .d-{breakpoint}-{value} для sm, md, lg, xl и xxl.

Где значение — одно из:

  • none
  • inline
  • inline-block
  • block
  • grid
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Отображаемые значения можно изменить, изменив переменную $displays и перекомпилировав SCSS.

Медиа-запросы влияют на ширину экрана с заданной контрольной точкой или больше. Например, .d-lg-none устанавливает display: none; на экранах lg, xl и xxl.

Примеры

d-inline

d-inline

<div>d-inline</div>
<div>d-inline</div>

d-block d-block

<span>d-block</span>
<span>d-block</span>

Скрытие элементов

Для более быстрой разработки, удобной для мобильных устройств, используйте адаптивные классы отображения для отображения и скрытия элементов по устройствам.

Избегайте создания совершенно разных версий одного и того же сайта, вместо этого скройте элементы в зависимости от размера экрана.

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d-{sm,md,lg,xl,xxl}-none для любого варианта адаптивного экрана.

Чтобы отображать элемент только в заданном интервале размеров экрана, Вы можете объединить один класс .d-*-none с классом .d-*-*, например, .d-none .d-md-block .d-xl-none .d-xxl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.

Размер экранаКласс
Скрыто на всех.d-none
Скрыто только на xs.d-none .d-sm-block
Скрыто только на sm.d-sm-none .d-md-block
Скрыто только на md. d-md-none .d-lg-block
Скрыто только на lg.d-lg-none .d-xl-block
Скрыто только на xl
.d-xl-none .d-xxl-block
Скрыто только на xxl.d-xxl-none
Видно на всех.d-block
Видно только на xs.d-block .d-sm-none
Видно только на sm.d-none .d-sm-block .d-md-none
Видно только на md.d-none .d-md-block .d-lg-none
Видно только на lg.d-none .d-lg-block .d-xl-none
Видно только на xl.d-none .d-xl-block .d-xxl-none
Видно только на xxl.d-none .d-xxl-block

скрыть на lg и более широких экранах

скрыть на экранах меньше lg

<div>скрыть на lg и более широких экранах</div>
<div>скрыть на экранах меньше lg</div>

Показать в печати

Измените значение display элементов при печати с помощью наших служебных классов отображения при печати. Включает поддержку тех же значений display, что и наши адаптивные утилиты .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Классы печати и отображения можно комбинировать.

Только экран (Скрывать только при печати)

Только печать (скрыть только на экране)

Скрыть до большого размера на экране, но всегда показывать на печати

<div>Только экран (Скрывать только при печати)</div>
<div>Только печать (скрыть только на экране)</div>
<div>Скрыть до большого размера на экране, но всегда показывать на печати</div>

Sass

API утилит

Утилиты отображения объявлены в нашем API утилит в scss/_utilities. scss. Узнайте, как использовать API утилит.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),

Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow — журнал «Доктайп»

CSS-свойство overflow отвечает за то, что происходит с содержимым блочного элемента, когда оно выходит за границы. Например, если картинка выпадает из родительского контейнера, вы можете её обрезать или добавить полосу прокрутки.

Чтобы указать, как должно отображаться содержимое элемента…

<div>
	<p>Константиновский Константин Константинович</p>
</div>

…нужно задать этому элементу стили:

.container {
  overflow: auto;
}

В этом примере мы добавим контейнеру полосу прокрутки, если имя не будет в нём помещаться.

Значения overflow

По умолчанию у overflow стоит значение visible, то есть содержимое будет отображаться как есть. Например, слишком длинный текст выйдет за пределы родительского элемента.

overflow: visible

Значение hidden скрывает часть содержимого, которая не поместилась в контейнере.

overflow: hidden

Значение scroll добавляет полосы прокрутки.

overflow: scroll

Значение auto автоматически определяет, нужно ли добавлять полосы прокрутки. Полосы появляются, когда содержимое выпадает из родительского контейнера, и исчезают, если оно помещается целиком.

Это значение более гибкое: при overflow: scroll полосы прокрутки сохраняются, даже если элемент помещается в контейнере, а при overflow: auto они исчезают.

Отображение при overflow: scroll и overflow: auto

Ошибки при использовании overflow

Использовать overflow: hidden для обрезки важного текста — пользователь не увидит спрятанную информацию и не поймёт написанное. Гораздо уместнее использовать это значение для оформления сайта, например, чтобы обрезать часть декоративного изображения.

Использовать overflow: scroll для всего содержимого страницы — если так сделать, на странице появятся лишние полосы прокрутки.

Наследуется ли свойство overflow

Свойство не наследуется, но дочерние элементы будут отображаться с учётом значения overflow. Например, здесь текст «Я вообще не влезаю в эту строку» обрежется, если выйдет за пределы <div>:

<div>
  <div>
    Я вообще не влезаю в эту строку
  </div>
</div>

.parent {
  overflow: hidden;
}

Для дочерних элементов можно прописать собственное значение overflow:

<div>
  <div>
  Я вообще не влезаю в эту строку
  </div>
</div>

.parent {
  overflow: hidden;
}
.child {
  overflow: auto;
}

В этом примере мы задали дочернему элементу свойство overflow: auto. То есть содержимое будет обрезано, но появится полоса прокрутки.

Чёрной рамкой обозначен родительский контейнер — по нему обрезается весь контент. Красной рамкой обведён дочерний элемент. Обратите внимание, что полоса прокрутки появилась именно у потомка, а не у родителя

Материалы по теме

  • Как размыть картинку. CSS-свойство filter
  • Как сделать фон на странице. CSS-свойство background
  • Как изменить ширину элемента. CSS-свойство width
  • Как изменить цвет на странице. CSS-свойство color
  • Как передвинуть элемент на странице. CSS-свойство position

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как верстать и оформлять цитаты

Красиво, просто и оригинально, чтобы текст заметили и запомнили.

CSS

  • 22 июня 2023

Окей, ChatGPT, сделай мне кнопку

История одного разговора

CSS

  • 21 июня 2023

Как использовать свойство object-fit

Как растягивать или сжимать картинки под размеры бокса.

CSS

  • 15 июня 2023

Единицы измерения в CSS: px, rem, em, fr, %

Где и как использовать.

CSS

  • 9 июня 2023

Как создать рамку вокруг элемента. CSS-свойство border

Цветные, точечные, пунктирные рамки и многое другое.

CSS

  • 31 мая 2023

Как сделать анимацию любой сложности. Свойство animation

Примеры и нюансы использования.

CSS

  • 29 мая 2023

Как создать тени на CSS: свойство box-shadow

Внутренние, внешние, с градиентом — на все случаи жизни.

CSS

  • 28 мая 2023

Как установить стиль шрифта. CSS-свойство font

Семейства шрифтов, начертание и размеры.

CSS

  • 27 мая 2023

Как работает transform в CSS на примерах

Интерактивная статья — попробуйте анимировать сами.

CSS

  • 23 мая 2023

Как оформить текст: 11 главных CSS-свойств

Инструкция для любителей поиграться со шрифтами.

CSS

  • 23 мая 2023

javascript — Как скрыть div html?

спросил

Изменено 5 лет, 1 месяц назад

Просмотрено 19 тысяч раз

 <дел>
   
   
   
   
   
   <дел>

Я пытаюсь скрыть последний Div. Я использую bootstrap. Итак, d-none не помогает, в css #more-hd display:none также с JS document.getElementById("more-hd" ). style.display = "none" тоже. Это всегда видно.. Я также пробовал сначала с ul > li.. ничего не происходит

  • javascript
  • html
  • css
2

Использование дисплея : нет !важно; до последних div добавить класс в последний div и использовать этот css в этом классе. Использование !important переопределит css, который уже был применен к этому div. У вас также есть несколько id , это плохая практика, поэтому используйте там один идентификатор.

 .lastDiv{
  отображение: нет !важно;
} 
 <дел>
          
          
          
          
          
          
Некоторое содержимое

Если вы хотите использовать id , используйте одно значение id с этим кодом:

 #more-hd{
  отображение: нет !важно;
} 
 <дел>
          
          
          
          
          
          
Некоторое содержимое

У вас также есть опция для селектора last-child в css, чтобы убедиться, что независимо от id или класса для последнего div внутри класса меню навигации , он всегда скрыт:

9 0010 . div-меню навигации: последний-дочерний { отображение: нет !важно; } 
 <дел>
          
          
          
          
          
          
Некоторое содержимое

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

ПРИМЕЧАНИЕ. ID всегда уникален. так что нет смысла в двух id

 .navigation-menu div: last-child {
отображение: нет !важно;
} 
 <дел>
   
   
   
   
   
   
тест

Пожалуйста, примените этот CSS.

 .navigation-menu div: last-child {
    дисплей: нет;
}

У вас не может быть пробела в id . Если вы хотите поместить CSS на #more-hd , это должно быть

 id="more-hd"

не

 id="больше-HD больше-вид"

Если вам нужно несколько способов обращения к элементу, используйте классы для дополнительных. Он может иметь только один идентификатор.

 .navigation-menu .fa-chevron-circle-down{
дисплей: нет;
} 
 <дел>
   
   
   
   
   
   
Тест на скрытие

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

[РЕШЕНО] Скрыть div на основе значения базы данных — PHP — Форумы SitePoint

laflair13 1

Я знаю, что для этого есть простое решение, но я не могу его найти.

В принципе, если $variable = 2, то я не хочу, чтобы отображался элемент div. Я пробовал код ниже, но получаю синтаксическую ошибку.

 
>div содержимое

РайанРиз 2

лафлер13:

>div содержимое

Попробуйте это.

 >div содержимое