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

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

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

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

Новые видимые классы добавлены в 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 пикселей. Для получения дополнительной информации нажмите здесь .

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/

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

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

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

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

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

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

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

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

В 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