Bootstrap xs hide: File not found · Bootstrap v5.1

Bootstrap 3 hidden-xs делает ряд более узким

Я экспериментирую с адаптивными сетками Bootstrap 3 и пытаюсь заставить столбец исчезнуть из строки, когда размер экрана невелик. Я могу заставить столбец исчезнуть, но в результате вся строка, кажется, становится уже.

Вот мой код, который приносит мне горе:

<div>
 <div>
  <div align="center">
   Col1
  </div>
  <div align="center">
   Col2
  </div>
  <div align="center">
   Col3
  </div>
  <div align="center">
   Col4
  </div>
  <div align="center">
   Col5
  </div>
 </div>
</div>

Столбцы Col4, а затем Col3 исчезают по мере того, как экран становится меньше, но строка становится уже при каждом удалении (по сравнению с строкой заголовка, которая не меняется). Я не понимаю, почему, поскольку я убедился, что все блоки складываются в ширину 12 для каждого этапа процесса. Я подумал, что, возможно, проблема была в col-xs-12, но удаление этого останавливает удаление столбца вообще и помещает удаленный столбец в Col5!

Мне явно не хватает ‘something’, но я нигде не могу найти ничего, что могло бы мне помочь — надеюсь
Здесь я найду просветление.

html

css

twitter-bootstrap-3

Поделиться

Источник

branty1970    

14 ноября 2013 в 20:41

2 ответа

• класс hidden-xs в btn-группе делает разрыв строки

  все БТН — в линию ( http://bootply.com/100575 ) когда я добавляю hidden-xs в btn-группу, это делает новый разрыв строки. ( http://bootply.com/100574 ) Я сменил коды, но не могу найти, как сделать btn в строке со скрытыми xs. <div class=btn-group> <a class=btn btn-default…

• Проблемы с вертикальным выравниванием блоков в ряд с Bootstrap 3

  Я делаю веб-приложение, используя Bootstrap 3 и Ruby на Rails. На индексной странице Я показываю все материалы в блоках col-lg-4 col-md-4 col-sm-6 (на картинке), и если высота блоков разная, то они не выровнены по вертикали Как выровнять блоки в ряд, как на рисунке 2??? Я не хочу использовать js. ..

56

Как это работает, если вместо этого вы используете только visible-md в Col4? Вы вообще используете-lg? Если нет, это может сработать.

<div>
    <div>
        <div align="center">
            Col1
        </div>
        <div align="center">
            Col2
        </div>
        <div align="center">
            Col3
        </div>
        <div align="center">
            Col4
        </div>
        <div align="center">
            Col5
        </div>
    </div>
</div>

Поделиться

Jimmie Johansson    

14 ноября 2013 в 20:49

-4

.row {
    margin-right: 15px;
}

брось это в свой CSS

Поделиться

Business ideas    

26 апреля 2018 в 11:33

Похожие вопросы:

Bootstrap 3 XS-почему порог высокий и как его изменить?

Я уже некоторое время использую bootstrap, и ни за что на свете не могу вспомнить, чтобы xs вступил в игру в 767px . Я использую Boostrap v3, LESS и не могу найти, где изменить порог для класса…

Bootstrap 3.0 hidden-xs не работает

У меня есть страница bootstrap 3.0, которая сейчас разделена на 9 коллов слева и 3 колла справа. Что я хочу, так это скрыть 3 правильных колла, когда размер экрана меньше 768. Это моя структура…

Bootstrap’. hidden-xs` не скрывает div

Я пытаюсь создать сайт, который будет скрывать расширенный раздел для пользователей на маленьком экране, используя Bootstrap .hidden-xs , чтобы проверить его, я использую мобильный эмулятор Chrome,…

класс hidden-xs в btn-группе делает разрыв строки

все БТН — в линию ( http://bootply.com/100575 ) когда я добавляю hidden-xs в btn-группу, это делает новый разрыв строки. ( http://bootply.com/100574 ) Я сменил коды, но не могу найти, как сделать…

Проблемы с вертикальным выравниванием блоков в ряд с Bootstrap 3

Я делаю веб-приложение, используя Bootstrap 3 и Ruby на Rails. На индексной странице Я показываю все материалы в блоках col-lg-4 col-md-4 col-sm-6 (на картинке), и если высота блоков разная, то они…

Bootstrap 4 отзывчивый navbar, который рушится при ширине xs?

Я пытаюсь найти пример bootstrap 4 отзывчивого navbar, который сворачивается до кнопки гамбургера только при ширине xs, но полностью виден, когда шире. Есть пример bootstrap 3, который просто…

hidden-xs скрывает div при печати в Bootstrap

в проекте MVC мы используем bootstrap. Есть необходимость скрыть div для устройств xs и показать во время печати и рабочего стола. Код приведен ниже как: <div class=hidden-xs> —Content—…

bootstrap hidden-xs не работает

Я только что узнал о hidden-xs, hidden-sm и т. д., поэтому пробую его в первый раз.. Почему это не скрывает div обзора на любом размере экрана? <div class=row hidden-sm> <div…

Bootstrap v4 ‘hidden-xs-up’ не работает

У меня есть следующий код в представлении: <button type=button tabindex=500 title=Abort ongoing upload class=btn btn-secondary hidden-xs-up> <i class=fa fa-ban></i> <span…

bootstrap 4 отзывчивые утилиты visible / hidden xs sm lg не работают

Возникли проблемы с новыми адаптивными утилитами скрытых / видимых классов при переходе на Bootstrap 4 . Я знаю, что .hidden — классы были удалены из v3 и заменены на .hidden-*-up .hidden-*-down ….

Сетка Bootstrap 3 — ИТ Шеф

В этой статье познакомимся с классами фреймворка Bootstrap 3, предназначенными для создания адаптивного «скелета» (макета) сайта.

«Строительные» элементы сетки Bootstrap 3

Сетка Bootstrap состоит из «строительных» элементов. Основные — это обёрточные контейнеры, ряды, адаптивные блоки и отзывчивые служебные классы.

По существу сетка — это просто список предопределённых классов, с помощью которых можно задать необходимое поведение блокам (HTML элементам) и построить с их помощью определённый адаптивный макет сайта.

Обёрточные контейнеры

Обёрточный контейнер — это «строительный» элемент сетки, с которого начинается создание макета для всей страницы или её части (например, шапки, основного меню, основной области, футера) в зависимости от стратегии разработки.

Контейнер в Bootstrap бывает адаптивно-фиксированным или адаптивно-резиновым.

Первый (адаптивно-фиксированный контейнер) характеризуется тем, что он имеет постоянную ширину в пределах некоторого диапазона ширины viewport (области просмотра).

В следующей таблице приведено то, какую ширину имеет адаптивно-фиксированный контейнер при той или иной ширине области просмотра (viewport) браузера:

Кроме установки ширины адаптивно-фиксированный контейнер Bootstrap ещё центрирует себя в горизонтальном направлении относительно краёв страницы. Выполняет это он с помощью CSS свойств margin-left:auto и margin-right:auto. Ещё адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх (с помощью CSS свойств padding-left:15px и padding-right:15px) для содержимого, которое в него помещено.

<!-- HTML-код адаптивно-фиксированного контейнера -->
<div>
  ...
</div>

Адаптивно-резиновый контейнер отличается от адаптивно-фиксированного тем, что он занимает всю ширину (100%) окна браузера. Кроме этого, он также как и адаптивно-фиксированный контейнер задает внутренние отступы слева и справа по 15рх для содержимого, которое в него помещено.

<!-- HTML-код адаптивно-резинового контейнера -->
<div>
  ...
</div>

При разработке макета сайта обычно не применяют вкладывание одних обёрточных контейнеров Bootstrap в другие.

Итак, первый «строительный» элемент сетки Bootstrap – это обёрточный контейнер. Он определяет ширину макета на различных viewport, а также выполняет его центрирование (только адаптивно-фиксированный контейнер) относительно левого и правого края рабочей области вкладки или окна браузера.

Следующий строительный элемент – это ряд (блок div с классом row). Ряд — это специальный блок, который применяется только для оборачивания других строительных элементов (адаптивных блоков). Его основное назначение — это нейтрализация положительного внутреннего отступа (15px слева и справа) обёрточного контейнера или адаптивного блока.

Пример формирования внутренних отступов:

container (+15px) -> row (-15px) -> col (+15px) -> контент
container (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент
*col - это адаптивный блок

Пример показывает, что независимо от того в каком адаптивном блоке находится контент, он всегда будет иметь правильный отступ от края (т.е. 15px слева и справа).

Следующий «строительный» элемент сетки Bootstrap – это адаптивный блок (div с классом col-?-?).

Адаптивные блоки — это элементы сетки Bootstrap, которым установлен один или несколько классов col-?-?. Данные блоки являются основными «строительными» кирпичиками, именно они и формируют необходимую структуру.

Ширина адаптивному блоку задаётся в связке с типом устройства. Это означает, что адаптивный блок на разных устройствах может иметь разную ширину. Именно из-за этого данный блок и называется адаптивным.

Как же осуществляется установка ширины адаптивному блоку? Установка ширины адаптивному блоку, которую он должен иметь на определённом устройстве, задаётся по умолчанию числом от 1 до 12 (количеством колонок Bootstrap). Данное число указывается вместо второго знака ? в классе col-?-?.

Данное число (по умолчанию от 1 до 12) определеяет какой процент от ширины родительского элемента должен иметь адаптивный блок.

Например, число 1 — устанавливает адаптивному блоку ширину, равную 8,3% (1/12) от ширины родительского блока. Число 12 — ширину, равную 100% (12/12) от ширины родительского блока.

Кроме указания ширины адаптивному блоку необходимо ещё указать и тип устройства (вместо 1 вопроса). Класс устройства будет определять то, на каком viewport будет действовать эта ширина. В Bootstrap 3 различают 4 основных класса. Это xs (ширина viewport >0) , sm (ширина viewport >= 768px), md (ширина viewport >= 992px) и lg (ширина области просмотра браузера >=1200px).

Например, адаптивный блок с классом col-xs-12 col-sm-6 col-md-4 col-lg-3 будет иметь на устройстве xs ширину 100% (12/12), на sm — 50% (6/12), на md — 33,3% (4/12), на lg — 25% (3/12).

Кроме этого следует обратить внимание на то, что адаптивные блоки не ограничивают свой диапазон. Т.е. если вы в атрибуте class адаптивного блока указали xs, но не указали sm, то его действие распространится и на область действия этого диапазона.

Например, адаптивный блок с классом col-xs-6 col-lg-3 будет иметь на устройствах xs, sm и md ширину 50% (6/12), на lg — 25% (3/12).

Адаптивный блок, также как и контейнер, задаёт положительные отступы слева и справа по 15px для контента, который в него будет помещён.

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

Например, разобьём блок на 3 равные колонки, которые на xs будут отображаться вертикально, а на sm и выше горизонтально:

<div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Если необходимо рассчитать ширину колонок в пикселях, то это правильно делать на границах контрольных точек (т.е. когда одно действие класса сменяется другим).

Например, расчитаем, доступную ширину под контент для первого и второго блока:

<div>
  <div>
    <div>1 блок...</div>
    <div>2 блок...</div>
  </div>
</div>

Расположение адаптивных блоков в родительском элементе

Адаптивные блоки располагаются в родительском элементе один за другим строчками. В одну строчку помещаются адаптивные блоки с суммарным количеством колонок не больше 12 (по умолчанию). Т.е. блоки, которые не помещаются в первую строку, располагаются в следующей строке и т.д.

В Bootstrap 3 адаптивные блоки являются плавающими (float:left). Это необходимо учитывать при создании макета веб-страницы.

Перед блоком, который должен начинаться с новой строки обязательно необходимо расположить пустой div элемент с классом clearfix. Ещё его необходимо скрыть для устройств, на которых это действие выполнять не нужно. Осуществляется скрытие блока с помощью соответствующих классов, приведённых ниже.

Ещё у плавающих блоков есть одна особенность. Например, если в вышеприведённом примере высота 1 блока будет выше, чем 2 блока. То 3 блок будет располагаться не на новой строчке, а «прилипнет» к правой стороне 1 блока.

Чтобы этого не допустить, необходимо добавить блок с классом clearfix и сделать его видимым для необходимых устройств (например, на md и lg):

<div>
  <div>1 блок...</div>
  <div>2 блок...</div>
  <div></div>
  <div>3 блок...</div>
</div>

Основной принцип создания макета

Основной принцип создания макета заключается во вкладывании одних адаптивных блоков в другие. При этом их ширина — это всегда относительный параметр, который задаётся в процентном отношении (количеством колонок) от ширины родительского блока. Т.е. на любом уровне вложенности, например, ширина адаптивного блока в 6 колонок — это всегда 50% (6/12*100%) от ширины родительского элемента.

Например, разобьём некоторый блок (основной) на 4 блока (2 в первой строке и 2 во второй). Для простоты, макет создадим не адаптивный:

<div>
  <div>1 блок...</div>
  <div>2 блок...</div>
  <div></div>
  <div>3 блок...</div>
  <div>4 блок...</div>
</div>

Создадим макет 3 блока (3 x 2):

<div>
  <div>1 блок...</div>
  <div>2 блок...</div>
  <div></div>
  <div>
    <div>
      <div>3-1 блок...</div>
      <div>3-2 блок...</div>
      <div></div>
      <div>3-3 блок...</div>
      <div>3-4 блок...</div>
      <div></div>
      <div>3-5 блок...</div>
      <div>3-6 блок...</div>
    </div>
  </div>
  <div>4 блок...</div>
</div>

Нетрудно заметить, что разметка вложенного адаптивного блока выполняется также как и основного. Это означает, что не имеет разницы, какой уровень вложенности имеет блок, создание его макета выполняется по тем же правилам.

Классы для адаптивного смещения блоков

В Bootstrap имеются адаптивные классы (col-?-offset-?), с помощью которых вы можете сдвинуть блок на определённое количество колонок вправо. Первый ? необходимо заменить на тип устройства (xs, sm, md или lg). Второй ? на количество колонок.

Например, зададим блоку на md устройствах ширину 8 колонок и расположим его в строке по центру (т.е. сдвинем его на 2 колонки вправо):

<div>
  <div>1 блок...</div>
</div>

Кроме инструментов для адаптивного смещения блоков, в Bootstrap 3 есть ещё специальные классы, с помощью которых можно изменить порядок следования элементов в пределах одной строки.

Отзывчивые служебные классы Bootstrap 3

Bootstrap 3 содержит адаптивные (служебные) классы, которые позволяют управлять видимостью отображения элементов в зависимости от типа устройства.

Кроме указания устройства (xs, sm, md, lg), на котором будет виден блок, необходимо ещё указать то, как на этом устройстве он должен отображаться. Возможные варианты: inline, block и inline-block.

Вместо знака ? необходимо указать block, inline или inline-block. Т.е. указать, как данный элемент должен отображаться.

Например, добавление к элементу класса visible-md-block будет означать то, что он будет отображаться только на устройствах, имеющим viewport md (width viewport >=992px и <1200px). Выглядеть данный элемент на странице будет как блок (CSS: display:block;).

Примечание: Эти классы также можно использовать совместно для того, чтобы элементы были видны на нескольких устройствах. Например, если вы примените к элементу классы visible-xs-inline и visible-md-inline, то это сделает его видимым на устройствах, имеющих как маленький экран, так и средний. Отображаться данный элемент будет как строчный (CSS: display:inline;).

Кроме этих Bootstrap 3 имеет ещё классы с противоположным действием. С их помощью можно скрыть элементы на определенных устройствах.

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

Например, элемент с классами hidden-xs и hidden-sm будет не виден сразу на 2 устройствах (xs и sm).

Кроме вышеприведённых отзывчивых классов, фреймворк Bootstrap 3 ещё содержит и такие, которые позволяют управлять видимостью элементов при печати.

Пример создания макета с помощью сетки Bootstrap 3

В этом разделе статьи рассмотрим процесс создания адаптивного макета для блока с использованием сетки Bootstrap 3.

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

Разрабатывать макет обычно начинают с крохотных устройств (xs). На данном устройстве блоки имеют одинаковую ширину, равную 12 колонкам Bootstrap.

<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div>Контент блока 3...</div>
</div>

На sm блоки располагаются следующим образом:

• 1 — занимает всю ширину родительского блока;
• 2 и 3 (каждый из них) — ширину, равную 6 колонкам Bootstrap.

<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div>Контент блока 3...</div>
</div>

На md блоки 1 и 2 расположены на первой строке, а 3 блок — на 2 строке. 1 блок имеет ширину, равную 8 колонкам Bootstrap (col-md-8), 2 блок — 4 колонки (col-md-4).

3 блок должен всегда располагаться на 2 строке. Чтобы это гарантировать, перед этим блоком необходимо поместить дополнительный пустой блок с классом clearfix. Данный блок не позволит 3 блоку обтекать предыдущие блоки. Кроме этого необходимо иметь в виду, что блок с классом clearfix необходимо отображать только на md, т.к. данное действие на других устройствах не нужно.

<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div></div>
  <div>Контент блока 3...</div>
</div>

На lg адаптивные блоки расположены горизонтально и занимают вместе всю ширину. 1 блок имеет ширину равную половине ширины родительского элемента (col-lg-6), 2 блок — одну четвертую ширины (col-lg-3), и 3 блок — тоже должен занимать одну четвертую ширину родительского элемента (col-lg-3).

<div>
  <div>Контент блока 1...</div>
  <div>Контент блока 2...</div>
  <div></div>
  <div>Контент блока 3...</div>
</div>

Ещё интересные темы:

Отсутствует видимое-** и скрытый-** в Bootstrap В4

Обновление для Bootstrap 4 (2018)

На скрытые-ивидимый-классов ***больше нет*** в Bootstrap 4. Если вы хотите скрыть элемент на определенных уровнях или точки останова в Bootstrap 4, Используйтед-*` дисплейный класс соответственно.

Помните, что особо малого/Mobile (ранее хз) по умолчанию (подразумевается) останова, если не переопределено больше останова. Таким образом, в -хз инфиксной больше не существует в Bootstrap 4.

Показать/Скрыть останова и вниз:

• скрытые-хз-вниз (скрытые-хз)=D-Ни д-см-блок`
• скрытые-см-вниз (скрытые-см. скрытые-хз)=д-Нет д-МД-блок`
• скрытые-МД-вниз (скрытые-МД скрытый-скрытый см-хз)=D-Ни д-ЛГ-блок`
• скрытые-ЛГ-вниз=Г-Нет д-ХL-блок`
• скрытые-ХL-вниз(П/3.х) =D-ни (как и «скрытые»)

Показать/Скрыть останова и до:

• скрытые-хз-до=D-ни (как и «скрытые»)
• скрытые-см-до=г-см-нет
• скрытые-МД-до=д-МД-нет
• скрытые-ЛГ-до=д-ЛГ-нет
• скрытые-ХL-вверх(П/3.х) =Д-ХL-нет

Показать/Скрыть только для одной точки:

• скрытые-ХЗ (только) = Д-нет Д-см-блок (как и скрытые-хз-вниз)
• скрытые-см(только) =Д-блок D-см-нет Д-МД-блок`
• скрытые-МД(только) =Д-блок D-мкр-не д-ЛГ-блок`
• скрытые-ЛГ(только) = с, D-блок D-ЛГ-нет Д-ХL-блок
• скрытые-ХL(П/3.х) =Д-блок D-ХЛ-нет
• видимый-ХЗ (только) =Д-блок D-см-нет
• видны-см(только) =Д-нет Д-см-блок D-МД-нет
• видимый-МД (только) = `Д-нет Д-МД-блок D-ЛГ-нет
• видимый-ЛГ (только) = `Д-нет Д-ЛГ-блок D-ХЛ-нет
• видимый-ХL (П/3.х) = Д-нет Д-ХL-блок

Демо отзывчивых классов в Bootstrap дисплей 4

Также, обратите внимание, что д-*-блок может быть заменен с **д-*-встроенные, г-*-гибкий, г-*-стол-телефон**, **г-*-таблица`** и т. д.. В зависимости от дисплея тип элемента. Подробнее о отображение классов

Адаптивные утилиты · Bootstrap

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

Попробуйте использовать их на ограниченной основе и избегайте создания совершенно разных версий одного и того же сайта. Вместо этого используйте их для дополнения презентации каждого устройства.

Содержание

Доступные классы

• Модель .hidden - * - up классы скрывают элемент, когда область просмотра находится на заданной точке останова или шире. Например, .hidden-md-up скрывает элемент в средних, больших и очень больших окнах просмотра.
• Классы .hidden - * - down скрывают элемент, когда область просмотра находится на заданной точке останова или меньше. Например, .hidden-md-down скрывает элемент в очень малых, малых и средних окнах просмотра.
• Не существует явных «видимых» / «показывающих» отзывчивых служебных классов; вы делаете элемент видимым, просто не скрывая его при этом размере точки останова.
• Вы можете объединить один класс .hidden - * - вверх с одним классом .hidden - * - down , чтобы отображать элемент только в заданном интервале размеров экрана. Например, .hidden-sm-down.hidden-xl-up показывает элемент только в средних и больших окнах просмотра. Использование нескольких классов .hidden - * - вверх или нескольких классов .hidden - * - down является избыточным и бессмысленным.
• Эти классы не пытаются приспособиться к менее распространенным случаям, когда видимость элемента не может быть выражена как единый непрерывный диапазон размеров точек останова области просмотра; вместо этого вам нужно будет использовать собственный CSS в таких случаях.

Классы печати

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

Контрольные примеры

Измените размер браузера или загрузите его на разных устройствах, чтобы протестировать отзывчивые служебные классы.

Зеленые галочки указывают на то, что элемент виден в текущем окне просмотра.

✔ Видно на очень маленьких
Очень маленький

✔ Видно на маленьких или более узких
Маленький или уже

✔ Видно на средних или более узких
Средний или более узкий

✔ Видно на больших или более узких
Большой или уже

✔ Виден на маленьком или широком
Маленький или более широкий

✔ Видно на среднем или широком
Средний или более широкий

✔ Видно на больших или широких
Большой или более широкий

✔ Видно на очень больших
Очень большой

✔ Ваше окно просмотра очень маленькое
Ваше окно просмотра НЕ совсем маленькое

✔ Ваше окно просмотра очень маленькое
Ваше окно просмотра НЕ совсем маленькое

✔ Ваше окно просмотра точно среднее
Ваше окно просмотра НЕ совсем среднее

✔ Ваше окно просмотра очень велико
Ваше окно просмотра НЕ совсем большое

✔ Ваше окно просмотра очень велико
Ваше окно просмотра НЕ очень велико

Показать свойство · Arizona Bootstrap

Быстро и быстро переключайте отображаемое значение компонентов и многое другое с помощью наших утилит для отображения.Включает поддержку некоторых из наиболее распространенных значений, а также некоторые дополнительные функции для управления отображением при печати.

Как это работает

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

Обозначение

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

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

• .d- {значение} для xs
• .d- {breakpoint} - {value} для sm , md , lg и xl .

Где значение является одним из:

• нет
• рядный
• рядный блок
• блок
• стол
• таблица-ячейка
• стол-ряд
• гибкий
• линейный гибкий

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

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

Примеры

  
 d-inline 
 d-inline 
  

d-блок
d-блок

   d-блок 
 d-block   

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

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

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

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

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

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

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

Отображение в печатном виде

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

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

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

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

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

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

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

Bootstrap 4 — Адаптивные утилиты

Адаптивные утилиты — это группа классов на основе медиа-запросов, которые определяют, когда элемент должен быть скрыт или показан в зависимости от области просмотра.Один из популярных вариантов использования для этого — управление навигацией по дисплею. Например, страница может иметь панель навигации на больших дисплеях и скрытую навигацию на маленьких дисплеях, которая отображается только тогда, когда пользователь решает открыть навигацию.

Давайте посмотрим на быстрый пример с нашей страницей Размер печати . Добавьте классы d-none и d-sm-block к элементам img :

  

    
 Наши размеры для печати 
    

        

            
            
 Маленький 
            ...
        
        

            
            
 Средний 
            ...
        
        

            
            
 Большой 
            ...
        
        

            
            
 Очень большой 
            ...
        
    
  

Класс d-done , как следует из его названия, устанавливает свойство отображения элемента, к которому он применяется, как none . Это делает элемент невидимым для всех, независимо от ширины области просмотра. С другой стороны, класс d-sm-block устанавливает свойство display элемента block , делая его видимым. Комбинация этих двух классов гарантирует, что рассматриваемый элемент станет видимым для небольших дисплеев и выше.Это эквивалент использования класса hidden-xs в Bootstrap 3:

Рисунок 2.18: Скрытие элементов в зависимости от размера области просмотра с использованием комбинации классов d-sm-block и d-none (example16.html)

Следует отметить, что, опять же, Bootstrap предлагает различные варианты этих классов в зависимости от требуемой точки останова и значения свойства. Например, d-sm-none , d-md-block , d-sm-block-inline , d-md-inline и т. Д.

Скрытие в Bootstrap 3
Bootstrap 3 предлагает только hidden- * (где * относится к размеру области просмотра. Например, hidden-xs ). Таким образом, чтобы скрыть элемент только при очень маленьком экране, мы добавим к нашему элементу класс hidden-xs при использовании Bootstrap 3. Классы hidden- * были удалены из Bootstrap 4.

То есть классы d- * придерживаются соглашений, найденных в системе сеток. В сетке col-md нацелен на все дисплеи Medium и ниже.Аналогично, d-md — none будет нацелен только на средний дисплеев или дисплеи меньше Medium (то есть маленькие).

Точки останова и правила мультимедиа с использованием Internet Explorer 10 на Windows Phone 8
Телефоны с Windows 8, предшествующие обновлению 3 (выпущенному 14 октября 2013 г.), не будут правильно применять медиа-запросы Bootstrap, а это означает, что страницы, использующие адаптивные классы, могут сломаться. Проблема вместе с (коротким) исправлением подробно описана в документации Bootstrap 4.

классов адаптивной видимости — Документация

Используйте один или комбинацию доступных классов для переключения содержимого между точками останова области просмотра.

Начиная с версии 3.2.0, классы .visible - * - * для каждой точки останова представлены в трех вариантах, по одному для каждого значения свойства отображения CSS, указанного ниже.

Итак, для очень маленьких ( xs ) экранов, например, доступный .visible - * - * классы: .visible-xs-block , .visible-xs-inline и .visible-xs-inline-block .

Классы .visible-xs , .visible-sm , .visible-md и .visible-lg также существуют, но устарели с версии 3.2.0 . Они приблизительно эквивалентны блоку .visible - * - , за исключением дополнительных особых случаев для переключения элементов, связанных с

  

  
    
    <стиль>
      @media (max-width: 767 пикселей) {
        .hidden-mobile {
          дисплей: нет;
        }
      }
    
  
  
    
 Привет 
    
 Например, есть текст. 
    
 Этот текст будет скрыт на больших устройствах. 
    
 Например, есть текст. 
 
  

  

  
    
    <стиль>
      @media (min-width: 768 пикселей) {
        .text {
          дисплей: нет;
        }
      }
      @media (min-width: 992px) {
        .text {
          дисплей: блок;
        }
      }
    
  
  
    
 Привет 
    
 Вот, например, какой-то текст.
    
 Этот текст будет скрыт на больших устройствах. 
    
 Например, есть текст. 
  
  

  

  
    
    
      тело {
        фон: нет;
      }
    
  
  
    
 Привет 
    
 Например, есть текст. 
     Этот текст будет скрыт на телефонах. 
    
 Вот, например, какой-то текст.
  
  

  

  
    
    
      тело {
        фон: нет;
      }
    
  
  
    
 Привет 
    
 Вот, например, какой-то текст.
    
 Этот текст будет скрыт на больших устройствах. 
    
 Например, есть текст. 
  
  

Пример: создание блока и встроенного элемента отображения

Здесь мы показали вам два разных типа дисплея.Первый - это .d-inline элементов, а второй - .d-block отображаемых элементов . Наряду с утилитой отображения мы также использовали некоторые цвета фона и интервалы.

  


  



    
    


  
 Встроенные элементы 
  
 встроенный 
  
 встроенный 
  
 Элементы уровня блока 
  
 блок 
  
 блок 



  

Выход:

Скрытый элемент

Bootstrap предоставляет интерактивный способ скрыть или отобразить элементы в соответствии с размером устройств.И вам не нужно тратить время на написание кодов для разных устройств. Bootstrap обеспечивает это с помощью своих адаптивных классов отображения.

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

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

Пример: адаптивное скрытие и отображение элементов.

Здесь мы взяли два класса адаптивного отображения. Класс .d-lg-none скрывает элементы на большом экране, тогда как .d-none d-lg-block скрывает элемент на меньшем экране.

  










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


  

Выход:

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

Отображение в печатном виде

Отображаемые значения можно изменить во время печати документа. Значение печати можно изменить с помощью утилиты отображения класса . Вот список отображаемых классов печати.

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

Пример: объединение классов печати отображения с классами отображения

В этой программе мы объединили класс дисплея с классом печати дисплея. Использовать . d-print-none класс, чтобы скрыть элемент во время печати.Используйте класс .d-none d-print-block , чтобы скрыть элемент на экране. Используйте класс d-none d-lg-block d-print-block , чтобы скрыть элемент для большого экрана.

  










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


  

Выход:

Вот результат работы вышеуказанной программы.

Заключение

Итак, теперь мы можем легко настроить свойство отображения с помощью Bootstrap 5. В начальной загрузке доступны различные служебные классы отображения, которые можно использовать для быстрой установки значений различных компонентов. Bootstrap также предоставляет нам классы печати, которые можно использовать для установки свойства отображения значений печати.

Показать свойство · Bootstrap-rtl

Быстро и быстро переключайте отображаемое значение компонентов и многое другое с помощью нашего дисплея
коммунальные услуги.Включает поддержку некоторых из наиболее распространенных значений, а также некоторые дополнительные функции для управления
отображать при печати.

Как это работает

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

Обозначение

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

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

• .d- {значение} для xs
• .d- {точка останова} - {значение} для см ,
md , lg и xl .

Где значение является одним из:

• нет
• рядный
• рядный блок
• блок
• стол
• таблица-ячейка
• стол-ряд
• гибкий
• линейный гибкий

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

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

Примеры

  
 d-inline 
 d-inline 
  

d-блок
d-блок

   d-block 
 d-block   

Скрывающие элементы

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

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

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

скрыть на экранах шире, чем LG

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

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

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

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

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

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

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

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

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

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

.