Traté de usar el Bootstrap visible y hidden clases para crear contenido sólo visible en el móvil/escritorio. Me di cuenta de que las clases no estaban funcionando correctamente (y he notado una gran cantidad de personas han tenido este problema y lo resolví de esta manera) así que he creado un móvil de la hoja de estilos para definir cuál de los divs para mostrar en el móvil.

Este es mi código actual:

<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
    </div>
  </div>
</div>

<div class="mobile">
  test
</div>

Ahora la .mobile debe ser visible en las pantallas de móviles, 900px de ancho, y más pequeños. He utilizado los archivos de inicio de clases para el otro div, .containerdiv, y que funciona hasta ahora, pero sólo cuando he añadido un valor para hidden-xs en mi propio móvil hoja CSS, como así;

.hidden-xs {
  display:none !important;
}
.mobile {
  display:block !important;
}

La .mobile div ahora debe aparecer en las pantallas de 900px o más pequeño, pero todavía no lo es. No estoy seguro de por qué no, display:block es la cosa correcta para utilizar el derecho? La adición de visible-xs y visible-sm no hace nada.

¿Cuál es la manera correcta de hacer esto y por qué es mi versión no funciona?

InformationsquelleAutor Jane | 2013-12-03

5 Comentarios

  1. 18

    Su .mobile div tiene los siguientes estilos en él:

    .mobile {
        display: none !important;
        visibility: hidden !important;
    }

    Por lo tanto, usted necesita para reemplazar el visibility propiedad con visible en adición a la sustitución de la display propiedad con block. Así:

    .visible-sm {
        display: block !important;
        visibility: visible !important;
    }
    • Primordial no trabajo así que me quita la Visibilidad en mi hoja de estilo y esto funcionó. Móvil ahora sólo se muestra en las pantallas de móviles, gracias!
    • lo siento. se me olvidó poner !importante en visibility: visible.
    • he aquí un artículo sobre cuándo utilizar visibilidad frente de la pantalla para ocultar y mostrar elementos. la versión corta es: visibility: hidden hace que los elementos invisible, pero que todavía ocupan el mismo espacio en el diseño. display: none oculta el elemento y la lleva completamente fuera del flujo de la página. w3schools.com/css/css_display_visibility.asp
  2. 7

    No CSS necesario, visible de la clase debe como este: visible-md-block no sólo visible-md y el código debe ser similar a esto:

    <div class="containerdiv hidden-sm hidden-xs visible-md-block visible-lg-block">
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
    
            </div>
        </div>
    </div>
    
    <div class="mobile hidden-md hidden-lg ">
        test
    </div>

    Css Extra no es necesaria en absoluto.

  3. 1

    Tu móvil clase no es correcta:

    .mobile {
      display: none !important;
      visibility: hidden !important; //This is what's keeping the div from showing, remove this.
    }
    • Esto haría que el móvil de la clase visible en ordenadores de sobremesa y eso no es lo que quiero, pero gracias por fijarse en él, el problema está resuelto 🙂
  4. 1

    Si le das la pantalla de propiedades de tabla en un div con css bootstrap oculto de la clase no tendrá efecto en que div

  5. 0

    A partir de hoy de noviembre de 2017

    Bootstrap v4 – beta

    Sensible utilidades

    Todos @de pantalla de las variables ha sido eliminado en la v4.0.0. El uso de los medios de comunicación-el punto de interrupción-up(), los medios de comunicación-el punto de interrupción-abajo(), o los medios de comunicación-punto de ruptura (la) Sass mixins o el $grid-puntos de interrupción Sass mapa del lugar.

    Eliminado de v3: .oculto-xs .oculto-sm .oculto-md .oculto-lg .visible-xs-bloque .visible-xs-en línea .visible-xs-inline-block .visible-sm-bloque .visible-sm-inline .visible-sm-inline-block .visible-md-bloque .visible-md-inline .visible-md-inline-block .visible-lg-bloque .visible-lg-inline .visible-lg-inline-block

    Eliminado de la v4 alphas: .oculto-xs-up .oculto-xs-abajo .oculto-sm-up .oculto-sm-abajo .oculto-md-up .oculto-md-abajo .oculto-lg-up .oculto-lg-abajo

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

Dejar respuesta

Please enter your comment!
Please enter your name here