¿Ocultar elementos en un diseño receptivo?

Mirando a través de bootstrap, parece que admiten el colapso de los elementos de la barra de menú para pantallas más pequeñas. ¿Hay algo similar para otros elementos en la página?

Por ejemplo, tengo junto con las píldoras de navegación flotando a la derecha. En una pantalla pequeña esto causa problemas. Al menos me encantaría ponerlo en un menú desplegable similar para hacer clic para mostrar más.

¿Es esto posible dentro del marco Bootstrap existente?

Nuevas clases visibles agregadas a Bootstrap

Dispositivos extra pequeños Teléfonos (<768px)(Class names : .visible-xs-block, hidden-xs)

Tabletas de dispositivos pequeños (≥768px)(Class names : .visible-sm-block, hidden-sm)

Dispositivos medianos Computadoras de escritorio (≥992px)(Class names : .visible-md-block, hidden-md)

Dispositivos grandes Escritorios de escritorio (≥1200px)(Class names : .visible-lg-block, hidden-lg)

Para más información: http://getbootstrap.com/css/#responsive-utilities

A continuación está en desuso a partir de v3.2.0

Dispositivos extra pequeños Teléfonos (<768px) (Class names : .visible-xs, hidden-xs)

Tabletas de dispositivos pequeños (≥768px) (Class names : .visible-sm, hidden-sm)

Dispositivos medianos Computadoras de escritorio (≥992px) (Class names : .visible-md, hidden-md)

Dispositivos grandes Escritorios de escritorio (≥1200px) (Class names : .visible-lg, hidden-lg)

Bootstrap mucho más viejo

.hidden-phone, .hidden-tablet etc. no son compatibles / obsoletos.

ACTUALIZAR:

En Bootstrap 4 hay 2 tipos de clases:

• El hidden-*-upcual oculta el elemento cuando la ventana está en el punto de interrupción dado o más ancho.
• hidden-*-down que ocultan el elemento cuando la ventana está en el punto de interrupción dado o más pequeño.

Además, la nueva xlventana gráfica se agrega para dispositivos que tienen más de 1200px de ancho. Para más información haga clic aquí .

Bootstrap 4 Beta Respuesta:

d-block d-md-nonepara esconderse en dispositivos medianos, grandes y extra grandes .

d-none d-md-blockpara esconderse en dispositivos pequeños y extra pequeños .

Tenga en cuenta que también puede alinearse reemplazando d-*-blockcond-*-inline-block

Respuesta anterior: Bootstrap 4 Alpha

• Puedes usar las clases .hidden-*-uppara esconderte en un tamaño dado y en dispositivos más grandes

  .hidden-md-uppara esconderse en dispositivos medianos, grandes y extra grandes .

• Lo mismo ocurre con .hidden-*-downocultar en un tamaño determinado y dispositivos más pequeños

  .hidden-md-downpara esconderse en dispositivos medianos, pequeños y extra pequeños

• visible- * ya no es una opción con bootstrap 4

• Para mostrar solo en dispositivos medianos , puede combinar los dos:

  hidden-sm-down y hidden-xl-up

Los tamaños válidos son:

• xs para teléfonos en modo vertical (<34em)
• sm para teléfonos en modo horizontal (≥34em)
• md para tabletas (≥48em)
• lg para escritorios (≥62em)
• xl para escritorios (≥75em)

Esto fue a partir de Bootstrap 4, alpha 5 (enero de 2017). Más detalles aquí: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

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

Bootstrap 4.x respuesta

hidden-* las clases se eliminan de Bootstrap 4 beta en adelante.

Si desea mostrar en medios y superiores, use las d-*clases, por ejemplo:

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

Si desea mostrar solo en pequeño y debajo, use esto:

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

Tamaño de pantalla y gráfico de clase

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

En lugar de usar .visible-*clases explícitas , hace que un elemento sea visible simplemente no ocultándolo en ese tamaño de pantalla. Puede combinar una .d-*-noneclase con una .d-*-blockclase para mostrar un elemento solo en un intervalo dado de tamaños de pantalla (por ejemplo, .d-none.d-md-block.d-xl-none muestra el elemento solo en dispositivos medianos y grandes).

Documentación

Puede ingresar estos sufijos de clase de módulo para cualquier módulo para controlar mejor dónde se mostrará u ocultará.

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

http://twitter.github.com/bootstrap/scaffolding.html desplazarse hacia abajo

Tengo un par de aclaraciones para agregar aquí:

1) La lista que se muestra (teléfono visible, tableta visible, etc.) está en desuso en Bootstrap 3. Los nuevos valores son:

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

El asterisco se traduce en lo siguiente para cada uno (solo muestro visible-xs- * a continuación):

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

2) Cuando usa estas clases, no agrega un punto al frente (como se muestra confusamente en parte de la respuesta anterior).

Por ejemplo:

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

3) Puede usar visible- * y hidden- * (por ejemplo, visible-xs y hidden-xs) pero estos han quedado en desuso en Bootstrap 3.2.0.

Para obtener más detalles y las últimas especificaciones, vaya aquí y busque "visible": http://getbootstrap.com/css/

Todo hidden-*-up, las hidden-*clases no funcionan para mí, por lo que estoy agregando una hiddenclase hecha a sí misma antes visible-*(que funciona para la versión de arranque actual). Es muy útil si necesita mostrar div solo para una pantalla y ocultar para todas las demás.

CSS:

.hidden {display:none;}

HTML:

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

Para Bootstrap 4.0 beta (y supongo que esto se mantendrá para el final) hay un cambio: tenga en cuenta que se eliminaron las clases ocultas.

Ver los documentos: https://getbootstrap.com/docs/4.0/utilities/display/

Para ocultar el contenido en el dispositivo móvil y mostrarlo en los dispositivos más grandes, debe usar las siguientes clases:

d-none d-sm-block

El conjunto de primera clase no muestra ninguno en todos los dispositivos y el segundo lo muestra para dispositivos "sm" (puede usar md, lg, etc. en lugar de sm si desea mostrar en diferentes dispositivos).

Sugiero leer sobre eso antes de la migración:

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

En boostrap 4.1 (ejecute el fragmento porque copié el código de la tabla completa de la documentación de 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