css - right - Bootstrap 3-deshabilita el colapso de la barra de navegación

navbar-brand

Question

Esta es mi barra de navegación simple:

<div class="navbar navbar-fixed-top myfont" role="navigation">
<div class="">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#">
<img src="assets/img/logo.png"/>
</a>
</li>
<li>
<button class="btn btn-navbar">
<i class="fa fa-edit"></i>
Create
</button>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li data-match-route="/"><a href="#/page-one">Login</a></li>
<li data-match-route="/"><a href="#/page-two/sub-a">Signup</a></li>
</ul>
</div>

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?

Answer 1

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.

Answer 2

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:

Es posible cambiar @grid-float-breakpoint en variables.less y recompilar 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";

Answer 3

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 :

<div class="navbar-header-menu">
<ul class="nav navbar-nav">
<li class="active"><a href="#">I''m always visible</a></li>
</ul>
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

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 .

Answer 4

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

Answer 5

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-atp">
<div class="container-fluid">
<div class="">
<ul class="nav navbar-nav nav-custom">
<li>
<a href="#" id="sidebar-btn"><span class="fa fa-bars">Toggle btn</span></a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Nav item</li>
</ul>
</div>
</div>
</nav>

Answer 6

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;
}
}