Bootstrap tiene algunas buenas .visible-* (por ejemplo. .visible-lg) clase de utilidad para la selección de lo que para mostrar u ocultar según el tamaño de la pantalla.

Cuando el uso de las clases, se aplica el estilo display: block !important; cuando en el correcto tamaño de la pantalla.

Pero a veces, me gustaría utilizarlo para algunos de los elementos que se muestran inline o inline-block.

¿Cómo podría yo limpiamente reemplazar algunos de bootstrap reglas para la elección? O debe ser una función de solicitud de inicio?


EDITAR

Parece que no soy el único que se preguntan acerca de este problema. Aquí está el github problema.

Gracias por la ultima respuesta!

  • Esto ya fue propuesto y rechazado: github.com/twbs/bootstrap/issues/8869
  • No estoy seguro de que la rechazó por completo. Se menciona v3.1 en la final. Tener .visible-inline-lg hace mucho sentido para mí.
  • Parece que fijo esta en v. 3.2.0 con la adición de pantalla específica sensibles de la visibilidad de las clases. Ver mi respuesta con la actualización completa.

4 Comentarios

  1. 63

    Actualización para el Bootstrap v3.2.0

    Esto es ahora de forma nativa resuelto en Bootstrap v3.2.0 con este commit

    De acuerdo a la nueva sensible clases de documentación:

    Como de la v3.2.0, la .visible- de clases para cada punto de interrupción en las tres variantes, una para cada propiedad CSS display valor indicado a continuación:

    Group of classes          | CSS display
     .visible-*-block         |  display: block;
     .visible-*-inline        |  display: inline;
     .visible-*-inline-block  |  display: inline-block;

    Por ejemplo, usted podría usar:

    <p>Device is: <span class="visible-lg-inline">Large</span></p>

    Otras Instancias

    Se le preguntó acerca de Stackoverflow:

    Informó en Bootstrap Cuestiones:

    • Gracias, para la actualización. Alguna idea de por qué no crear .hidden-*-*?
    • no se rompió porque sería sólo ocultar elementos con base en screenwidth, que no requieren de postular un tipo de pantalla
    • Gran que .visible--bloque está disponible. Pero, ¿por qué es la contrapartida .oculto--el bloque no está disponible?
  2. 15

    Esto ha sido corregido en la v3.1.

    .visible-lg o .visible-md será la fuerza de display: block !important; pero el uso de .hidden-xs o .hidden-sm va a mostrar en línea.

    • No estoy seguro de que entiende cómo se resuelve el problema.
    • Se resuelve el display inline problema mediante el uso de hidden-xs hidden-sm hidden-lg en lugar de visiblem-md.
    • No «oculta» exactamente lo contrario de «visible», aunque?
    • ocultos que se esconden en el tamaño que usted elija , visible mostrará el tamaño de la pantalla que usted necesita
  3. 1

    Actualización para bootstrap 3.1 o superior, de hecho, se soluciona el problema ya que a partir de este punto en el hidden- sólo las clases de ocultar la etiqueta, y no establece display: block más. De esta manera puede utilizar <div> para bloquear el contexto y <span> para inline-block contexto (el normal comportamiento de estas etiquetas)

Dejar respuesta

Please enter your comment!
Please enter your name here