twitter bootstrap - popovers - Cómo deshabilitar el colapso justificado por bootstap nav para dispositivos más pequeños

popovers bootstrap 4

Question

Estoy usando bootstrap para justificar un grupo de pestañas para ajustar uniformemente el ancho del elemento padre. Esto es importante para mi. Sin embargo, Bootstrap los colapsa automáticamente para dispositivos más pequeños, dándoles un ancho del 100%, que no quiero. ¿Cómo puedo desactivar esta función? Código simple:

<ul class="nav nav-tabs nav-justified>
    <li></li>
    <li></li>
    <li></li>
</ul>

Gracias

Answer 1

Estas respuestas no son correctas. Bootstrap tiene una forma simple integrada para hacer esto, de la misma manera que maneja el colapso para el menú superior.

1. Agregue la clase navbar-default al elemento nav . Se colapsará sin esta clase, pero no tendrá el pequeño ícono de expansión (las tres líneas horizontales en las que hace clic para expandir).

2. Agregue las clases navbar-collapse collapse al div interno que contiene los enlaces que deberían colapsar.

3. Agregar <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> antes de su div que debería colapsar.

Esto saldrá bastante desordenado al tratar de cortar y pegar mis 3 pasos anteriores; Lo que hice fue literalmente copiar y pegar esas secciones de mi barra de navegación en la parte superior y luego pegarlas una a una. Esos 3 elementos son lo que necesita, sin embargo: navbar-default, navbar-collapse, y el botón.

Answer 2

Puede agregar un contenedor con la clase col-xs-12, por lo que se apilará en pantallas muy pequeñas. Después de todo, si desea que no esté apilado en todas las pantallas, solo escriba una consulta de medios.

Busque las consultas en los medios: http://getbootstrap.com/css/#grid

Si comparte más código, entonces puedo ser más específico en respuesta.

Answer 3

Tienes que agregar ancho: 1% para hacerlo estirar

.nav-justified > li {
    display: table-cell; 
    width: 1%
}