twitter-bootstrap - menus - navbar bootstrap example

Disminución de la altura de la barra de navegación bootstrap 3.0

Question

Estoy intentando disminuir la altura de la barra de navegación de bootstrap 3.0 que se usa con el comportamiento superior fijo. Aquí estoy usando el código.

HTML

<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
<div class="navbar-inner-sm">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav pull-right">
<li class="active">
<a href="../getting-started">Getting started</a>
</li>
<li>
<a href="../css">Ext01</a>
</li>
<li>
<a href="../components">Language</a>
</li>
<li>
<a href="../javascript">My Account</a>
</li>
<li>
<a href="../customize">Sign Out</a>
</li>
</ul>
</nav>
</div>
</div>
</div>

CSS

.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);}
.navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;}
.navbar-inner-sm .nav.pull-right {float: right;}
.navbar-inner-sm .nav > li {display: block;float: left;}
.navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;}
.navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;}
.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;}
.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}

Resultado

Desde la pantalla que se muestra, la barra de navegación disminuyó en la salida, pero la altura no disminuyó. la altura original se muestra en color rosa.

La secuencia de comandos css casi funciona bien en bootstrap 2. *

¿Hay alguna manera de disminuir la altura correctamente?

Answer 1

Creo que podemos escribir menos estilos, sin cambiar el color existente. Lo siguiente funcionó para mí (en Bootstrap 3.2.0)

.navbar-nav > li > a { padding-top: 5px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 5px; padding-bottom: 10px; padding-left: 10px; }

El último (''navbar-brand'') es realmente necesario solo si tiene texto como su ''nombre de marca''.

Answer 2

Después de pasar algunas horas, agregar la siguiente clase css solucionó mi problema.

Trabaja con Bootstrap 3.0. *

.tnav .navbar .container { height: 28px; }

Trabajar con Bootstrap 3.3.4

.navbar-nav > li > a, .navbar-brand {
padding-top:4px !important;
padding-bottom:0 !important;
height: 28px;
}
.navbar {min-height:28px !important;}

Actualizar el código completo para personalizar y disminuir la altura de la barra de navegación con una captura de pantalla.

CSS:

/* navbar */
.navbar-primary .navbar { background:#9f58b5; border-bottom:none; }
.navbar-primary .navbar .nav > li > a {color: #501762;}
.navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;}
.navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;}
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {}
.navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;}
.navbar-primary .navbar .navbar-brand {color:#fff;}
.navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;}
.navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 40px; }

Código de uso:

<div class="navbar-xs">
<div class="navbar-primary">
<nav class="navbar navbar-static-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>

Answer 3

Esta es mi experiencia

 .navbar { min-height:38px; }
.navbar .navbar-brand{ padding: 0 12px;font-size: 16px;line-height: 38px;height: 38px; }
.navbar .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 38px; }
.navbar .navbar-toggle { margin-top: 3px; margin-bottom: 0px; padding: 8px 9px; }
.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
.navbar .navbar-collapse {border-color: #A40303;}

Answer 4

La única manera que funcionó para mí se explica en este enlace: ¿Cómo se disminuye la altura de la barra de navegación en Bootstrap 3?

Disminuye la altura de la barra de navegación con solo dos líneas de código

Answer 5

Obtuve el mismo problema, la altura de la barra de menú proporcionada por el programa de arranque era demasiado grande, en realidad descargué un arranque erróneo, finalmente me deshice de él descargando el bootstrap de orignal de este sitio ... http://getbootstrap.com/2.3.2/ quiero usar bootstrap en yii (netbeans) siga este tutorial, https://www.youtube.com/watch?v=XH_qG8gphaw ... La voz no está presente pero los pasos son lentos, puede comprenderlos fácilmente e implementarlos ellos. Gracias

Answer 6

Quería agregar mis 2 peniques y un agradecimiento a James Poulose por su respuesta original; era el único que funcionaba para mi proyecto en particular (MVC 5 con la última versión de Bootstrap 3).

Esto está principalmente dirigido a principiantes, para mayor claridad y para facilitar futuras ediciones. Le sugiero que agregue una sección en la parte inferior de su archivo CSS para su proyecto, por ejemplo, me gusta hacer esto:

/* Bootstrap overrides */
.some-class-here {
}

Tomando la respuesta de James Poulose arriba hice esto:

/* Bootstrap overrides */
.navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; }

Cambié los valores de relleno para presionar el texto en mi elemento de la barra de navegación. Puedes anular cualquier elemento de Bootstrap como este y es una buena forma de hacer cambios sin arruinar las clases base de Boostrap porque lo último que quieres hacer es hacer un cambio allí y luego perderlo cuando actualices Bootstrap.

Finalmente, para una separación aún mayor, me gusta dividir mis archivos CSS y usar @import declarations para importar sus subarchivos en un archivo CSS principal para una fácil administración, por ejemplo:

@import url(''css/mysubcssfile.css'');

Nota : si extrae varios archivos, debe asegurarse de que se carguen en el orden correcto.

Espero que esto ayude a alguien.

Answer 7

Si ustedes están generando sus hojas de estilo con LESS / SASS y están importando Bootstrap allí, he encontrado que anular la variable @ navbar-height le permite establecer la altura de la barra de navegación, que originalmente se definió en el archivo variables.less.

Answer 8

Simplemente anule el conjunto de min-altura en .navbar así:

.navbar{
min-height:20px; //* or whatever height you require
}

Alterar la altura de un elemento a algo más pequeño que la altura mínima no hará la diferencia ...

Answer 9

Solución de trabajo:

Bootstrap 3.0 de forma predeterminada tiene un relleno de 15 píxeles en la parte superior e inferior, ¡así que solo tenemos que anularlo!

Por ejemplo:

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}

Answer 10

si está utilizando menos fuente, debe haber una variable para la altura de la barra de navegación en el archivo variables.less . Si no está utilizando la fuente, puede personalizarla utilizando la utilidad customize que proporciona el sitio de bootstrap. Y luego puedes descargarlo e incluirlo en tu proyecto. La variable que está buscando es: @navbar-height