Bootstrap 3 – deshabilita el colapso de la barra de navegación

Esta es mi barra de navegación simple:

 

Solo me gustaría evitar que esto colapse, porque no lo necesito, ¿cómo puedo hacerlo?

Me gustaría evitar escribir 300K líneas de CSS para anular los estilos predeterminados.

¿Cualquier sugerencia?

Después de un examen detallado, no 300k líneas, pero hay alrededor de 3-4 propiedades de CSS que debe anular:

 .navbar-collapse.collapse { display: block!important; } .navbar-nav>li, .navbar-nav { float: left !important; } .navbar-nav.navbar-right:last-child { margin-right: -15px !important; } .navbar-right { float: right!important; } 

Y con esto tu menú no colapsará.

DEMO ( jsfiddle )

EXPLICACIÓN

Las cuatro propiedades CSS hacen lo respectivo:

  1. La propiedad .collapse predeterminada en bootstrap oculta el lado derecho del menú para tabletas (paisaje) y teléfonos, y en su lugar se muestra un botón de alternar para ocultarlo / mostrarlo. Por lo tanto, esta propiedad anula el valor predeterminado y muestra de forma persistente esos elementos.

  2. Para que el menú del lado derecho aparezca en la misma línea junto con el lado izquierdo, necesitamos que el lado izquierdo flote hacia la izquierda.

  3. Esta propiedad está presente de manera predeterminada en el arranque pero no en la resolución de la tableta (retrato) a teléfono. Puede omitir este, es probable que no afecte a su barra de navegación general.

  4. Esto mantiene el menú del lado derecho hacia la derecha, mientras que los elementos internos ( li ) seguirán la propiedad 2. De modo que tenemos el flotador izquierdo y el derecho flotante derecho que los lleva a una línea.

El nabvar colapsará en dispositivos pequeños. El punto de colapso está definido por @grid-float-breakpoint en variables. Por defecto esto será antes de 768px . Para pantallas debajo del ancho de la pantalla de 768 píxeles, la barra de navegación tendrá el siguiente aspecto:

enter image description here

Es posible cambiar @grid-float-breakpoint en variables.less y recomstackr Bootstrap. Al hacer esto, también tendrá que cambiar @screen-xs-max en navbar.less. Deberá establecer este valor en su nuevo @grid-float-breakpoint -1 . Ver también: https://github.com/twbs/bootstrap/pull/10465 . Esto es necesario para cambiar los formularios de la barra de navegación y las listas desplegables en @ grid-float-breakpoint a su versión móvil también.

La forma más fácil es personalizar bootstrap

encontrar variable:

  @grid-float-breakpoint 

que está configurado en @screen-sm , puede cambiarlo según sus necesidades. ¡Espero eso ayude!


Para los usuarios de SAAS

agregue sus variables personalizadas como $grid-float-breakpoint: 0px; antes del @import "bootstrap.scss";

Este es un enfoque que no modifica el comportamiento de colapso predeterminado y permite que una nueva sección de navegación permanezca siempre visible. Es un aumento de navbar ; navbar-header-menu es una clase de CSS que he creado y no es parte de Bootstrap propiamente dicha.

Coloque esto en el elemento navbar-header después de la navbar-brand :

  

Agrega este CSS:

 .navbar-header-menu { float: left; } .navbar-header-menu > .navbar-nav { float: left; margin: 0; } .navbar-header-menu > .navbar-nav > li { float: left; } .navbar-header-menu > .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; } .navbar-header-menu > .navbar-nav .open .dropdown-menu { position: absolute; float: left; width: auto; margin-top: 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } .navbar-header-menu > .navbar-form { float: left; width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0; margin-left: 0; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-header-menu > .navbar-form > .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; } .navbar-header-menu > .navbar-left { float: left; } .navbar-header-menu > .navbar-right { float: right !important; } .navbar-header-menu > *.navbar-right:last-child { margin-right: -15px !important; } 

Mira el violín: http://jsfiddle.net/L2txunqo/

Advertencia: la navbar-right se puede utilizar para ordenar elementos visualmente, pero no se garantiza que tire del elemento a la parte más alejada de la pantalla. El violín demuestra ese comportamiento con la navbar-form la navbar-form .

Si no está usando la versión menos, aquí está la línea que necesita cambiar:

 @media (max-width: 767px) { /* Change this to 0 */ .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } } 

La siguiente solución funcionó para mí en Bootstrap 3.3.4:

CSS:

 /*no collapse*/ .navbar-collapse.collapse.off { display: block!important; } .navbar-collapse.collapse.off ul { margin: 0; padding: 0; } .navbar-nav.no-collapse>li, .navbar-nav.no-collapse { float: left !important; } .navbar-right.no-collapse { float: right!important; } 

luego agregue la clase .no-collapse a cada una de las listas y la clase .off al contenedor principal. Aquí hay un ejemplo escrito en jade:

 nav.navbar.navbar-default.navbar-fixed-top .container-fluid .collapse.navbar-collapse.off ul.nav.navbar-nav.no-collapse li a(href='#' class='glyph') i(class='glyphicon glyphicon-info-sign') ul.nav.navbar-nav.navbar-right.no-collapse li.dropdown a.dropdown-toggle(href='#', data-toggle='dropdown' role='button' aria-expanded='false') | Tools span.caret ul.dropdown-menu(role='menu') li a(href='#') Tool #1 li a(href='#') | Logout 

Otra forma es simplemente eliminar el collapse navbar-collapse de la collapse navbar-collapse desde el marcado. Ejemplo con Bootstrap 3.3.7

   
    Intereting Posts