Скрытие элементов в адаптивном макете?


298

Глядя через начальную загрузку, кажется, что они поддерживают свертывание элементов меню для небольших экранов. Есть ли что-то похожее для других предметов на странице?

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

Возможно ли это в рамках существующей среды Bootstrap?

Ответы:


649

Новые видимые классы добавлены в Bootstrap

Очень маленькие устройства Телефоны (<768 пикселей)(Class names : .visible-xs-block, hidden-xs)

Планшеты для небольших устройств (≥768px)(Class names : .visible-sm-block, hidden-sm)

Средние устройства Рабочие столы (≥992px)(Class names : .visible-md-block, hidden-md)

Большие устройства для настольных ПК (≥1200px)(Class names : .visible-lg-block, hidden-lg)

Для получения дополнительной информации: http://getbootstrap.com/css/#responsive-utilities


Ниже устарела с версии 3.2.0


Очень маленькие устройства Телефоны (<768 пикселей) (Class names : .visible-xs, hidden-xs)

Планшеты для небольших устройств (≥768px) (Class names : .visible-sm, hidden-sm)

Средние устройства Рабочие столы (≥992px) (Class names : .visible-md, hidden-md)

Большие устройства для настольных ПК (≥1200px) (Class names : .visible-lg, hidden-lg)


Намного старше Bootstrap


.hidden-phone, .hidden-tablet и т.д. не поддерживаются / устарели.

ОБНОВИТЬ:

В Bootstrap 4 есть 2 типа классов:

  • Они hidden-*-upскрывают элемент, когда область просмотра находится на заданной точке останова или шире.
  • hidden-*-down которые скрывают элемент, когда область просмотра находится на заданной точке останова или меньше.

Также xlдобавлен новый видовой экран для устройств шириной более 1200 пикселей. Для получения дополнительной информации нажмите здесь .


2
Я не верю .hidden-phoneи .hidden-tabletне рекомендую ** - они ** не поддерживаются . Устаревший имеет тенденцию означать, что «был заменен другими подходами, хотя все еще поддержанный, должен скоро быть прекращен» . Похоже, что это имеет место с Bootstrap 3.2.0 - .visible-xsи тому подобное пока работает, в то время как .hidden-phoneи друзья полностью отсутствуют в функциональности Bootstrap.
Слипп Д. Томпсон

2
Спасибо - я обновил ответ до правильной формулировки. Должно быть немного понятнее другим пользователям сейчас.
Марк Уберштейн

2
К вашему сведению Было проведено немного больше исследований - кажется, что «устаревший» обычно используется в формальных контекстах, поскольку состояние неподдерживаемости следует за амортизацией. Я думаю, что «неподдерживаемый» работает так же хорошо, но что угодно. Спасибо за рассмотрение моего предыдущего предложения.
Слипп Д. Томпсон

1
:) Я добавил оба ... ради непрофессионала ради. Спасибо, что сделали немного больше исследований по правильной формулировке, обязательно учту это для будущих постов. ура
Марк Уберштейн

2
Обратите внимание, что обновление Bootstrap 4 предназначено для альфа начальной загрузки. В версии выпуска вы должны использовать классы .d- -none и d- -block . getbootstrap.com/docs/4.0/migration/#responsive-utilities
Питер де Би

138

Bootstrap 4 Beta Ответ:

d-block d-md-noneчтобы шкура на средних, больших и сверхбольших устройств.

d-none d-md-blockчтобы спрятаться на малых и особо малых устройств.

введите описание изображения здесь

Обратите внимание , что вы можете также встраивать путем замены d-*-blockсd-*-inline-block


Старый ответ: Bootstrap 4 Alpha

  • Вы можете использовать классы, .hidden-*-upчтобы скрыть на заданном размере и больших устройствах

    .hidden-md-upчтобы шкура на средних, больших и сверхбольших устройств.

  • То же самое .hidden-*-downкасается скрытия на заданном размере и меньших устройствах

    .hidden-md-downчтобы шкура на средних, малых и экстра-маленьких устройств

  • visible- * больше не вариант с начальной загрузкой 4

  • Чтобы отобразить только на средних устройствах , вы можете объединить два:

    hidden-sm-down и hidden-xl-up

Допустимые размеры:

  • xs для телефонов в портретном режиме (<34em)
  • sm для телефонов в ландшафтном режиме (≥34em)
  • md для таблеток (≥48em)
  • lg для настольных компьютеров (≥62em)
  • xl для настольных компьютеров (≥75em)

Это было с Bootstrap 4, alpha 5 (январь 2017 года). Более подробная информация здесь: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

На Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/


8
Они были удалены из v4 бета. Теперь вы используете .d-классы, чтобы скрыть или показать в разных размерах. getbootstrap.com/docs/4.0/utilities/display
DriverDan

1
Я видел, но я все еще пытаюсь решить это .... Как мне скрыть что-то на маленьком экране только сейчас? Мне нужна противоположность d-md-none, так как я переключаю на div в зависимости от большого экрана против маленького экрана.
Лео Мюллер

@LeoMuller Если вы хотите, чтобы элемент скрывался в размере sm и ниже, но отображался в md, lg и xl, используйте d-none d-md-block. code.luasoftware.com/tutorials/bootstrap/…
Десмонд Луа

@DesmondLua Я думаю, то же самое, что LeoMuller ... в BS4 некоторые элементы ведут себя как блоки, а некоторые другие как гибкие ... ¿почему я должен знать ранее о природе элемента BS4, только если я хочу скрыть его в телефонах, но я Хотите отобразить его как стандарт BS4 в планшетах и ​​ноутбуках? Это противоречит тому, как вы обычно думаете ... Я надеюсь, что команда BS4 исправит это до финального релиза
JavierFuentes

Я не могу найти документацию по d-blockу в текущей документации Bootstrap 4, они это удалили?
Модзими

32

Bootstrap 4.x ответ

hidden-* классы удалены из Bootstrap 4 бета-версии.

Если вы хотите показать на средних и выше, используйте d-*классы, например:

<div class="d-none d-md-block">This will show in medium and up</div>

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

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

Размер экрана и диаграмма классов

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

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

Документация


23

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

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop 

http://twitter.github.com/bootstrap/scaffolding.html прокрутить вниз


Спасибо - я действительно хочу, чтобы они были видны ... просто в сжатой / свернутой форме, такой как navbar-collapse, которая предназначена исключительно для navbar, и я не вижу никакой другой поддержки других элементов ...
Kaitlyn2004

Они складываются в зависимости от имен классов и / или идентификаторов. Если вы найдете CSS / JS, вы можете добавить дополнительные классы / идентификаторы, которые делают то же самое.
до

Есть ли шанс, что вы могли бы привести пример? Я вижу плагин свертывания, но не уверен насчет реализации. по крайней мере, внутри панели навигации это, кажется, обрабатывается очень автоматически - или, по крайней мере, встроено в ядро ​​начальной загрузки
Kaitlyn2004

7
Устаревший с Bootstrap 3.
Герелтод

1
Пожалуйста, сообщите, что это только для #Bootstrap 2
Лукас Бустаманте

19

У меня есть пара разъяснений, чтобы добавить здесь:

1) Показанный список (visible-phone, visible-tablet и т. Д.) Устарел в Bootstrap 3. Новые значения:

  • видимая xs- *
  • видимая SM- *
  • видимая MD- *
  • видимая LG- *
  • скрытый xs- *
  • скрытый SM- *
  • скрытый MD- *
  • скрытый LG- *

Звездочка означает следующее для каждого (я показываю только visible-xs- * ниже):

  • Видимый-XS-блок
  • Видимый-хз-рядный
  • Видимый-хз-рядный блок

2) Когда вы используете эти классы, вы не добавляете точку впереди (как смутно показано в части ответа выше).

Например:

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) Вы можете использовать visible- * и hidden- * (например, visible-xs и hidden-xs), но они не рекомендуются в Bootstrap 3.2.0.

Для получения более подробной информации и последних спецификаций, перейдите сюда и выполните поиск по запросу «visible»: http://getbootstrap.com/css/


Неверно hidden-xs-blockне верно, но visible-xs-blockесть
Хаммад Хан

@hmd: Можете ли вы предоставить источник / цитату для вашего комментария, который я даже не до конца понимаю, потому что это даже не полное предложение. Что именно вы пытаетесь поделиться? Вы говорите, что только hidden-xs-block недопустим, или вы говорите, что hidden-xs- * недопустим? Вы говорите, что hidden-md-block действителен, а hidden-xs-block - нет? Пожалуйста, уточните, особенно потому, что вы, кажется, понизили мой комментарий, когда я на самом деле скопировал словоблудие непосредственно из начальной документации по загрузке. На какую версию начальной загрузки вы ссылаетесь в своем комментарии?
Джазимов

2
хорошо, может быть, есть некоторые изменения в начальной загрузке. Достаточно взглянуть на голосующий ответ, который дает правильное решение. Со скрытым элементом, вы не можете использовать блок, встроенный и встроенный блок. С видимым, вы должны его использовать. Я думаю, что я использую bootstrap 3.x. Просто попробуйте свое решение для элемента, который скрывается на телефоне :)
Хаммад Хан

2

Все hidden-*-up, hidden-*классы не работают для меня, поэтому я добавляю самодельный hiddenкласс раньше visible-*(который работает для текущей версии начальной загрузки). Это очень полезно, если вам нужно показать div только для одного экрана и скрыть для всех остальных.

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>

1
скрытые классы * были исключены из бета-версии Bootstrap 4, теперь вы используете d- {sm, md, lg, xl} -нет
Chris M

Спасибо! На всякий случай мой ответ остается в силе для не-бета
Гедиминас

2

В бета-версии Bootstrap 4.0 (и я предполагаю, что она останется окончательной) есть изменение - имейте в виду, что скрытые классы были удалены.

См. Документы: https://getbootstrap.com/docs/4.0/utilities/display/.

Чтобы скрыть контент на мобильных устройствах и отображать его на более крупных устройствах, необходимо использовать следующие классы:

d-none d-sm-block

Первый набор классов не отображает все на разных устройствах, а второй отображает его для устройств «sm» вверх (вы можете использовать md, lg и т. Д. Вместо sm, если вы хотите показать на разных устройствах.

Предлагаю прочитать об этом до миграции:

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities


это печально, хотя это не работает нормально с переключателем коллапса
Дэвид Константин

0

В boostrap 4.1 (запустите сниппет, потому что я скопировал весь код таблицы из документации Bootstrap):

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}
<table class="fixed_headers">
  <thead>
    <tr>
      <th>Screen Size</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hidden on all</td>
      <td><code class="highlighter-rouge">.d-none</code></td>
    </tr>
    <tr>
      <td>Hidden only on xs</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on sm</td>
      <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on md</td>
      <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on lg</td>
      <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on xl</td>
      <td><code class="highlighter-rouge">.d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible on all</td>
      <td><code class="highlighter-rouge">.d-block</code></td>
    </tr>
    <tr>
      <td>Visible only on xs</td>
      <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
    </tr>
    <tr>
      <td>Visible only on sm</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
    </tr>
    <tr>
      <td>Visible only on md</td>
      <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
    </tr>
    <tr>
      <td>Visible only on lg</td>
      <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible only on xl</td>
      <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
    </tr>
  </tbody>
</table>

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.