Ховати елементи у чуйному макеті?

Якщо дивитися через завантажувальний інструмент, схоже, вони підтримують згортання елементів меню для менших екранів. Чи є щось подібне для інших елементів на сторінці?

Наприклад, у мене поряд із навігаційними таблетками пливли праворуч. На маленькому екрані це спричиняє проблеми. Я хотів би принаймні розмістити його в подібному спадному меню "натисніть на показ".

Чи можливо це в існуючих рамках Bootstrap?

До Bootstrap додані нові видимі класи

Додаткові невеликі пристрої Телефони (<768px)(Class names : .visible-xs-block, hidden-xs)

Малі пристрої для планшетів (≥768 пікселів)(Class names : .visible-sm-block, hidden-sm)

Середні пристрої Настільні ПК (≥992 пікселів)(Class names : .visible-md-block, hidden-md)

Настільні комп'ютери великих пристроїв (≥1200px)(Class names : .visible-lg-block, hidden-lg)

Для отримання додаткової інформації: http://getbootstrap.com/css/#responsive-utilities

Нижче застаріло станом на v3.2.0

Додаткові невеликі пристрої Телефони (<768px) (Class names : .visible-xs, hidden-xs)

Малі пристрої для планшетів (≥768 px) (Class names : .visible-sm, hidden-sm)

Середні настільні пристрої (≥992 пікселів) (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:

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щоб шкура на середніх, малих і екстра-маленьких пристроїв

• vid- * більше не є варіантом завантаження 4

• Щоб відображати лише на середніх пристроях , ви можете комбінувати два:

  hidden-sm-down і hidden-xl-up

Дійсні розміри:

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

Це було станом на Bootstrap 4, альфа 5 (січень 2017). Детальніше тут: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

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

Відповідь завантажувача 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) Показаний список (видимий телефон, видимий планшет тощо) застарілий у Bootstrap 3. Нові значення:

• видимо-xs- *
• видимо-см- *
• видимо-md- *
• видимо-lg- *
• сховано-xs- *
• приховано-см- *
• приховано-md- *
• приховано-lg- *

Зірочка перекладається для наступного (я показую лише видимі-xs- * нижче):

• видимий-xs-блок
• видима-xs-inline
• видимий-xs-вбудований блок

2) Використовуючи ці класи, ви не додаєте періоду попереду (як заплутано показано в частині відповіді вище).

Наприклад:

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

3) Ви можете використовувати видимі * та приховані- * (наприклад, видимі-xs та приховані-xs), але вони застаріли в Bootstrap 3.2.0.

Щоб отримати детальнішу інформацію та найновіші характеристики, перейдіть сюди та шукайте "видиме": 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