Ukrywasz elementy w responsywnym układzie?

Przeglądając bootstrap, wygląda na to, że obsługują zwijanie elementów paska menu dla mniejszych ekranów. Czy jest coś podobnego do innych elementów na stronie?

Na przykład mam pigułki nawigacyjne płynące w prawo. Na małym ekranie powoduje to problemy. Chciałbym przynajmniej umieścić go w podobnym menu rozwijanym „kliknij, aby pokazać”.

Czy jest to możliwe w ramach istniejącej struktury Bootstrap?

Dodano nowe widoczne klasy do Bootstrap

Bardzo małe urządzenia Telefony (<768px)(Class names : .visible-xs-block, hidden-xs)

Małe urządzenia Tablety (≥768px)(Class names : .visible-sm-block, hidden-sm)

Średnie urządzenia Komputery stacjonarne (≥992px)(Class names : .visible-md-block, hidden-md)

Duże urządzenia Komputery stacjonarne (≥ 1200 pikseli)(Class names : .visible-lg-block, hidden-lg)

Aby uzyskać więcej informacji: http://getbootstrap.com/css/#responsive-utilities

Poniżej jest przestarzałe od wersji 3.2.0

Bardzo małe urządzenia Telefony (<768px) (Class names : .visible-xs, hidden-xs)

Małe urządzenia Tablety (≥768px) (Class names : .visible-sm, hidden-sm)

Średnie urządzenia Komputery stacjonarne (≥992px) (Class names : .visible-md, hidden-md)

Duże urządzenia Komputery stacjonarne (≥ 1200 pikseli) (Class names : .visible-lg, hidden-lg)

Znacznie starszy Bootstrap

.hidden-phone, .hidden-tablet itp. są nieobsługiwane / nieaktualne.

AKTUALIZACJA:

W Bootstrap 4 są 2 rodzaje klas:

• hidden-*-upKtóre ukryć element, gdy rzutnia jest w danym przerwania lub szerszym.
• hidden-*-down które ukrywają element, gdy rzutnia znajduje się w danym punkcie przerwania lub mniejszym.

Dodano także nową xlrzutnię dla urządzeń o szerokości większej niż 1200 pikseli. Aby uzyskać więcej informacji, kliknij tutaj .

Bootstrap 4 Beta Odpowiedź:

d-block d-md-noneaby ukryć się na średnich, dużych i bardzo dużych urządzeniach.

d-none d-md-blockaby ukryć się na małych i bardzo małych urządzeniach.

Pamiętaj, że możesz także inline zastępując d-*-blockzd-*-inline-block

Stara odpowiedź: Bootstrap 4 Alpha

• Możesz użyć klas .hidden-*-updo ukrycia się na danym rozmiarze i większych urządzeniach

  .hidden-md-upaby ukryć się na średnich, dużych i bardzo dużych urządzeniach.

• To samo dotyczy .hidden-*-downukrywania się na danym rozmiarze i mniejszych urządzeniach

  .hidden-md-downaby ukryć się na średnich, małych i bardzo małych urządzeniach

• visible- * nie jest już opcją dla bootstrap 4

• Aby wyświetlić tylko na średnich urządzeniach , możesz połączyć dwa:

  hidden-sm-down i hidden-xl-up

Prawidłowe rozmiary to:

• xs dla telefonów w trybie pionowym (<34em)
• sm dla telefonów w trybie poziomym (≥34em)
• md dla tabletów (≥48em)
• lg dla komputerów stacjonarnych (≥62em)
• xl dla komputerów stacjonarnych (≥75em)

Tak było w przypadku Bootstrap 4, alpha 5 (styczeń 2017). Więcej informacji tutaj: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

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

Odpowiedź Bootstrap 4.x.

hidden-* klasy są usuwane z Bootstrap 4 w wersji beta.

Jeśli chcesz pokazywać na średnim i wyższym poziomie, użyj d-*klas, np .:

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

Jeśli chcesz wyświetlać tylko w małych rozmiarach i poniżej, użyj tego:

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

Rozmiar ekranu i tabela klas

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

Zamiast używać jawnych .visible-*klas, element staje się widoczny, po prostu nie ukrywając go przy tym rozmiarze ekranu. Możesz połączyć jedną .d-*-noneklasę z jedną .d-*-blockklasą, aby wyświetlić element tylko w danym przedziale wielkości ekranu (np. .d-none.d-md-block.d-xl-none Pokazuje element tylko na średnich i dużych urządzeniach).

Dokumentacja

Możesz wprowadzić sufiksy klas modułów dla dowolnego modułu, aby lepiej kontrolować, gdzie będzie pokazywany lub ukryty.

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

http://twitter.github.com/bootstrap/scaffolding.html przewiń w dół

Mam tutaj kilka wyjaśnień:

1) Pokazana lista (widoczny telefon, widoczny tablet itp.) Jest przestarzała w Bootstrap 3. Nowe wartości to:

• visible-xs- *
• widoczne-sm- *
• visible-md- *
• visible-lg- *
• hidden-xs- *
• ukryty-sm- *
• hidden-md- *
• ukryty-lg- *

Gwiazdka przekłada się na następujące dla każdego (poniżej pokazuję tylko widoczne-xs- *):

• visible-xs-block
• visible-xs-inline
• visible-xs-inline-block

2) Kiedy korzystasz z tych klas, nie dodajesz kropki z przodu (jak myląco pokazano w części powyższej odpowiedzi).

Na przykład:

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

3) Możesz użyć visible- * i hidden- * (na przykład visible-xs i hidden-xs), ale zostały one przestarzałe w Bootstrap 3.2.0.

Aby uzyskać więcej informacji i najnowsze specyfikacje, przejdź tutaj i wyszukaj „widoczne”: http://getbootstrap.com/css/

Wszystko hidden-*-up, hidden-*zajęcia nie działa dla mnie, więc jestem dodanie self-made hiddenklasę przed visible-*(który pracuje dla aktualnej wersji bootstrap). Jest to bardzo przydatne, jeśli chcesz wyświetlić div tylko dla jednego ekranu i ukryć dla wszystkich innych.

CSS:

.hidden {display:none;}

HTML:

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

W przypadku Bootstrap 4.0 w wersji beta (zakładam, że pozostanie to do końca) nastąpiła zmiana - pamiętaj, że ukryte klasy zostały usunięte.

Zobacz dokumentację: https://getbootstrap.com/docs/4.0/utilities/display/

Aby ukryć zawartość na urządzeniu mobilnym i wyświetlać na większych urządzeniach, musisz użyć następujących klas:

d-none d-sm-block

Zestaw pierwszej klasy nie wyświetla wszystkich na wszystkich urządzeniach, a drugi wyświetla go dla urządzeń „sm” w górę (możesz użyć md, lg itp. Zamiast sm, jeśli chcesz wyświetlać na różnych urządzeniach.

Sugeruję przeczytać o tym przed migracją:

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

W boostrap 4.1 (uruchom snippet, ponieważ skopiowałem cały kod tabeli z dokumentacji 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