Twitter-Bootstrap altura de la barra de navegación demasiado pequeña

Question

La altura predeterminada de la barra de navegación en Twitter-Bootstrap es demasiado pequeña. Cuando se aumenta la altura, invade los divs a continuación. ¿Cómo puedo aumentar la altura de la barra de navegación que desliza toda la página hacia abajo? Si esto es posible, cómo colocar los enlaces de la barra de navegación en la parte superior/inferior de la barra de navegación.

Answer 1

Estoy bastante seguro de que no me encanta esta solución, pero funciona por la cantidad de tiempo que tengo que pasar en esto.

.navbar .container { height: 2em; } 

he tenido que añadir también un poco de acolchado superior en el mismo selector para hacer las cosas dentro de la barra de navegación para alinear verticalmente muy bien.

corregir: Acabo de volver a leer su pregunta y vi que tiene problemas con los "divs a continuación". Al hacer esto, también necesita ajustar el relleno en la etiqueta del cuerpo, p.

body { padding-top: 6em; } 

por la Twitter Bootstrap docs on Navbar:

Cuando Usted pone la barra de navegación, recuerde que debe tener en cuenta el área oculta debajo. Agregue 40px o más de diseños al <cuerpo>. Asegúrese de agregar esto después del núcleo de Bootstrap CSS y antes de la respuesta opcional CSS.

Answer 2

Adición de un acolchado como eso no es suficiente si estás usando sensible de arranque. En este caso, cuando cambie el tamaño de su ventana obtendrá un espacio entre la parte superior de la página y la barra de navegación. Una solución adecuada es el siguiente:

body { 
    padding-top: 60px; 
} 
@media (max-width: 979px) { 
    body { 
    padding-top: 0px; 
    } 
} 

Fuente: Twitter Bootstrap - top nav bar blocking top content of the page

Answer 3

puede probar esto. funciona en cualquier tamaño de pantalla.

.navbar .container { min-height: 83px; } 


.navbar-fixed-top { 
    position:static; 
    margin-bottom:20px; 
    } 

Answer 4

</script> 

$(".dropdown-toggle").click(function() { 
$(".nav-collapse").css('height', 'auto') 
}); 

</script> 

Esto resolvió un problema similar mío, (Los submenús no aparecía debido a la pequeña altura ul padres, en el primer clic) puede que funciona para usted también.