Скрытие элементов в гибкой компоновке?

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

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

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

ОТВЕТЫ

Ответ 1

Новые видимые классы добавлены в 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

Bootstrap 4 Beta Ответ:

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

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

enter image description here

Обратите внимание, что вы также можете d-*-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/

Ответ 3

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

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

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

Ответ 4

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

1) Отображенный список (видимый-телефон, видимый-планшет и т.д.) устарел в Bootstrap 3. Новые значения:

  • visible-xs- *
  • visible-sm- *
  • видимой мкр - *
  • visible-lg- *
  • скрытого хз - *
  • hidden-sm- *
  • hidden-md- *
  • скрытых Л.Г. - *

Звездочка переводится следующим образом для каждого (я показываю только видимый-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.

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

Ответ 5

Bootstrap 4.x ответ

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

Если вы хотите показывать на средних и более d-* классы 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 показывает элемент только на средних и больших устройствах).

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

Ответ 6

Все классы 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>

Ответ 7

Для бета-версии 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

Ответ 8

В 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>