Nascondere gli elementi in un layout reattivo?

Guardando attraverso il bootstrap sembra che supportino il collasso degli elementi della barra dei menu per schermi più piccoli. C'è qualcosa di simile per altri oggetti nella pagina?

Ad esempio, ho un insieme con le pillole nav fluttuanti a destra. Su un piccolo schermo ciò causa problemi. Mi piacerebbe almeno inserirlo in un menu a discesa simile per fare clic per mostrare di più.

È possibile all'interno del framework Bootstrap esistente?

Nuove classi visibili aggiunte a Bootstrap

Telefoni per dispositivi extra piccoli (<768px)(Class names : .visible-xs-block, hidden-xs)

Tablet per dispositivi di piccole dimensioni (≥768px)(Class names : .visible-sm-block, hidden-sm)

Dispositivi medi Desktop (≥992px)(Class names : .visible-md-block, hidden-md)

Desktop di dispositivi di grandi dimensioni (≥1200 px)(Class names : .visible-lg-block, hidden-lg)

Per maggiori informazioni: http://getbootstrap.com/css/#responsive-utilities

Di seguito è deprecato dalla v3.2.0

Telefoni per dispositivi extra piccoli (<768px) (Class names : .visible-xs, hidden-xs)

Tablet per dispositivi di piccole dimensioni (≥768px) (Class names : .visible-sm, hidden-sm)

Dispositivi medi Desktop (≥992px) (Class names : .visible-md, hidden-md)

Desktop di dispositivi di grandi dimensioni (≥1200 px) (Class names : .visible-lg, hidden-lg)

Bootstrap molto più vecchio

.hidden-phone, .hidden-tablet ecc. non sono supportati / obsoleti.

AGGIORNARE:

In Bootstrap 4 ci sono 2 tipi di classi:

• Il hidden-*-upche nascondono l'elemento quando la finestra è al punto di interruzione dato o più ampio.
• hidden-*-down che nascondono l'elemento quando la finestra si trova nel punto di interruzione specificato o più piccolo.

Inoltre, xlviene aggiunta la nuova finestra per dispositivi con una larghezza superiore a 1200 px. Per maggiori informazioni clicca qui .

Bootstrap 4 Beta Risposta:

d-block d-md-noneper nascondersi su dispositivi medi, grandi ed extra grandi .

d-none d-md-blockper nascondersi su dispositivi piccoli ed extra-piccoli .

Nota che puoi anche in linea sostituendo d-*-blockcond-*-inline-block

Vecchia risposta: Bootstrap 4 Alpha

• Puoi usare le classi .hidden-*-upper nasconderti su una data dimensione e su dispositivi più grandi

  .hidden-md-upper nascondersi su dispositivi medi, grandi ed extra grandi .

• Lo stesso vale .hidden-*-downper nascondersi su una determinata dimensione e dispositivi più piccoli

  .hidden-md-downper nascondere il medie, piccole ed extra-piccoli dispositivi

• visible- * non è più un'opzione con bootstrap 4

• Per visualizzare solo su dispositivi medi , è possibile combinare i due:

  hidden-sm-down e hidden-xl-up

Le dimensioni valide sono:

• xs per telefoni in modalità verticale (<34em)
• sm per telefoni in modalità orizzontale (≥34em)
• md per compresse (≥48em)
• lg per desktop (≥62em)
• xl per desktop (≥75em)

Questo era a partire da Bootstrap 4, alpha 5 (gennaio 2017). Maggiori dettagli qui: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

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

Bootstrap 4.x risposta

hidden-* le classi vengono rimosse da Bootstrap 4 beta in poi.

Se vuoi mostrare su media e su usa le d-*classi, ad esempio:

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

Se vuoi mostrare solo in piccolo e in basso usa questo:

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

Dimensioni dello schermo e grafico delle classi

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

Invece di usare .visible-*classi esplicite , rendi visibile un elemento semplicemente non nascondendolo a quella dimensione dello schermo. È possibile combinare una .d-*-noneclasse con una .d-*-blockclasse per mostrare un elemento solo su un dato intervallo di dimensioni dello schermo (ad es. .d-none.d-md-block.d-xl-none Mostra l'elemento solo su dispositivi di medie e grandi dimensioni).

Documentazione

È possibile inserire questi suffissi di classe modulo per qualsiasi modulo per controllare meglio dove verrà mostrato o nascosto.

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

http://twitter.github.com/bootstrap/scaffolding.html scorrere verso il basso

Ho un paio di chiarimenti da aggiungere qui:

1) L'elenco visualizzato (telefono visibile, tablet visibile, ecc.) È obsoleto in Bootstrap 3. I nuovi valori sono:

• visibile-XS- *
• visibile-SM- *
• visibile-MD- *
• visibile-LG- *
• hidden-XS- *
• hidden-SM- *
• hidden-MD- *
• hidden-LG- *

L'asterisco si traduce in quanto segue per ciascuno (mostrerò solo visible-xs- * sotto):

• visibili-xs-block
• visibili-xs-linea
• visibili-xs-inline-block

2) Quando usi queste classi, non aggiungi un punto in primo piano (come mostrato in modo confuso nella parte della risposta sopra).

Per esempio:

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

3) Puoi usare visible- * e hidden- * (ad esempio, visible-xs e hidden-xs) ma questi sono stati deprecati in Bootstrap 3.2.0.

Per maggiori dettagli e le ultime specifiche, vai qui e cerca "visibile": http://getbootstrap.com/css/

Tutti hidden-*-up, le hidden-*classi non funzionano per me, quindi in precedenza sto aggiungendo una hiddenclasse self-made visible-*(che funziona per l'attuale versione bootstrap). È molto utile se devi mostrare div solo per uno schermo e nasconderti per tutti gli altri.

CSS:

.hidden {display:none;}

HTML:

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

Per Bootstrap 4.0 beta (e presumo che rimarrà per il finale) c'è un cambiamento - sii consapevole che le classi nascoste sono state rimosse.

Consulta i documenti: https://getbootstrap.com/docs/4.0/utilities/display/

Per nascondere i contenuti sui dispositivi mobili e visualizzarli sui dispositivi più grandi, devi utilizzare le seguenti classi:

d-none d-sm-block

Il primo set di classi non mostra nessuno su tutti i dispositivi e il secondo lo visualizza per i dispositivi "sm" (si potrebbe usare md, lg, ecc. Invece di sm se si desidera mostrare su dispositivi diversi.

Suggerisco di leggere questo prima della migrazione:

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

In boostrap 4.1 (esegui lo snippet perché ho copiato l'intero codice della tabella dalla documentazione di 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