html - para - ¿Ocultando elementos en diseño responsivo?

ocultar o mostrar div en determinados dispositivos o resoluciones (8)

Bootstrap 4 Beta Answer:

d-block d-md-none para ocultar en dispositivos medianos, grandes y extra grandes .
d-none d-md-block para ocultar en dispositivos pequeños y extra pequeños .

Tenga en cuenta que también puede en línea reemplazando el d-*-block d-*-inline-block con d-*-inline-block

Antigua respuesta: Bootstrap 4 Alpha

Puede usar las clases .hidden-*-up para ocultar en un tamaño dado y dispositivos más grandes
.hidden-md-up para ocultar en dispositivos medianos, grandes y extra grandes .
Lo mismo ocurre con .hidden-*-down para ocultarse en un tamaño determinado y en dispositivos más pequeños
.hidden-md-down para ocultar 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 retrato (<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/

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

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

¿Es esto posible dentro del marco existente de Bootstrap?

Nuevas clases visibles añadidas 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 Escritorios (≥992px) (Class names : .visible-md-block, hidden-md)

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

Para obtener 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 para dispositivos pequeños (≥768px) (Class names : .visible-sm, hidden-sm)

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

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

Bootstrap mucho mayor

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

ACTUALIZAR:

En Bootstrap 4 hay 2 tipos de clases:

El hidden-*-up que oculta el elemento cuando la ventana gráfica se encuentra en el punto de interrupción o más amplio.
hidden-*-down que oculta el elemento cuando la ventana gráfica se encuentra en el punto de interrupción o menor.

Además, el nuevo viewport xl se agrega para dispositivos que tienen más de 1200px de ancho. Para más información haz click aquí .

En boostrap 4.1 (ejecute un 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

Para Bootstrap 4.0 beta (y supongo que esto permanecerá para la final) hay un cambio: tenga en cuenta que las clases ocultas fueron eliminadas.

Consulte la documentación: 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 todos los dispositivos y el segundo lo muestra para dispositivos "sm" arriba (puede usar md, lg, etc. en lugar de sm si desea mostrar en diferentes dispositivos).

Sugiero leer sobre eso antes de la migración:

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

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 hasta la parte inferior

Tengo un par de aclaraciones para agregar aquí:

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

visible-xs- *
visible-sm- *
visible-md- *
visible-lg- *
oculto-xs- *
oculto-sm- *
oculto-md- *
oculto-lg- *

El asterisco se traduce en lo siguiente para cada (muestro solo las letras visibles -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:

3) Puedes usar visible- * y hidden- * (por ejemplo, visible-xs y hidden-xs) pero estos se han desaprobado en Bootstrap 3.2.0.

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

Todas hidden-*-up clases hidden-*-up , hidden-* no funcionan para mí, así que estoy agregando clases hidden visible-* antes de visible-* (lo que funciona para la versión actual de bootstrap). 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>

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

Si desea mostrar en medio y arriba, use las clases d-* , por ejemplo:

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

Si quieres mostrar solo en pequeño y debajo usa esto:

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

Tamaño de pantalla y tabla 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 utilizar clases .visible-* explícitas, puede hacer que un elemento sea visible simplemente no ocultándolo en ese tamaño de pantalla. Puede combinar una clase .d-*-none con una clase de .d-*-block 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).

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