Estoy tratando de disminuir la altura de la barra de navegación de bootstrap 3.0 que se usa con un comportamiento superior fijo. Aquí estoy usando 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
En la pantalla que muestra, la barra de navegación disminuyó en la salida pero la altura no disminuyó. La altura original se muestra en color rosa.
El script css anterior casi funciona bien en bootstrap 2. *
¿Hay alguna forma de disminuir la altura correctamente?
twitter-bootstrap
navbar
twitter-bootstrap-3
irfanmcsd
fuente
fuente
Respuestas:
Después de pasar unas horas, agregar la siguiente clase css solucionó mi problema.
Trabaja con Bootstrap 3.0. *
Trabajar con Bootstrap 3.3.4
Actualice el código completo para personalizar y disminuir la altura de la barra de navegación con captura de pantalla.
CSS:
Código de uso:
fuente
Solución de trabajo:
Bootstrap 3.0 por defecto tiene un relleno de 15px en la parte superior e inferior, ¡así que solo necesitamos anularlo!
Por ejemplo:
fuente
.navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}por defecto.Simplemente anule la altura mínima establecida en .navbar así:
Modificar la altura de un elemento a algo más pequeño que la altura mínima no hará una diferencia ...
fuente
si está utilizando la fuente less, debería haber una variable para la altura de la barra de navegación en el
variables.lessarchivo. Si no está utilizando la fuente, puede personalizarla con la utilidad de personalización que proporciona el sitio de bootstrap. Y luego puedes descargarlo e incluirlo en tu proyecto. La variable que busca es:@navbar-heightfuente
Esta es mi experiencia
fuente
.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }Si están generando sus hojas de estilo con LESS / SASS y están importando Bootstrap allí, descubrí que anular la variable @ navbar-height le permite establecer la altura de la barra de navegación, que se define originalmente en el archivo variables.less.
fuente
Quería agregar mis 2 centavos y un agradecimiento a James Poulose por su respuesta original, fue el único que funcionó 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 las ediciones futuras, le sugiero que agregue una sección en la parte inferior de su archivo CSS para su proyecto, por ejemplo, me gusta hacer esto:
Tomando la respuesta de James Poulose anterior, hice esto:
Cambié los valores de padding-top para empujar el texto hacia abajo en mi elemento de la barra de navegación. Puede anular prácticamente cualquier elemento de Bootstrap como este y es una buena manera de hacer cambios sin arruinar las clases base de Boostrap porque lo último que quiere hacer es hacer un cambio allí y luego perderlo cuando actualice Bootstrap.
Finalmente, para una separación aún mayor, me gusta dividir mis archivos CSS y usar declaraciones @import para importar sus subarchivos en un archivo CSS principal para una fácil administración, por ejemplo:
Nota : si está introduciendo varios archivos, debe asegurarse de que se carguen en el orden correcto.
Espero que esto ayude a alguien.
fuente
Creo que podemos escribir esto con menos estilos, sin cambiar el color existente. Lo siguiente funcionó para mí (en Bootstrap 3.2.0)
El último ('navbar-brand') es realmente necesario solo si tiene texto como nombre de 'marca'.
fuente
Tengo el mismo problema, la altura de mi barra de menú proporcionada por bootstrap era demasiado grande, de hecho descargué un bootstrap incorrecto, finalmente me deshice de él descargando el bootstrap original 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 comprender e implementar fácilmente ellos. Gracias
fuente