Bootstrap 3 - deshabilitar el colapso de la barra de navegación

88

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 se hace?

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

¿Cualquier sugerencia?

css twitter-bootstrap-3 navbar collapse preventdefault soy yo
fuente

Respuestas:

138

Después de examinar de cerca, no 300k líneas, pero hay alrededor de 3-4 propiedades 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 su menú no colapsará.

DEMO ( jsfiddle )

EXPLICACIÓN

Las cuatro propiedades CSS hacen lo respectivo:

  1. La .collapsepropiedad predeterminada en bootstrap oculta el lado derecho del menú para tabletas (horizontal) y teléfonos y, en su lugar, se muestra un botón de alternancia para ocultarlo / mostrarlo. Por lo tanto, esta propiedad anula la predeterminada y muestra esos elementos de manera persistente.

  2. Para que el menú del lado derecho aparezca en la misma línea junto con el del lado izquierdo, necesitamos que el lado izquierdo esté flotando a la izquierda.

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

  4. Esto mantiene el menú del lado derecho a la derecha mientras que los elementos internos ( li) seguirán la propiedad 2. Así que tenemos el flotador del lado izquierdo a la izquierda y el flotador del lado derecho a la derecha, lo que los pone en una línea.

AyB
fuente
2
@gwho Acaba de agregar una explicación a la respuesta.
AyB
1
Si se vuelve lo suficientemente delgado, los elementos flotantes a la izquierda y a la derecha pueden envolverse entre sí (estoy hablando de los uls, no de los lis). ¿Cuál es la mejor manera de evitar que esto suceda?
ahnbizcad
2
Si su único requisito es evitar que la lista UL / LI se vuelva vertical, el segundo CSS es todo lo que necesita.
JamesB
1
Las !importantdeclaraciones no son necesarias aquí, para mí funciona sin ellas. Trate de evitarlos siempre que sea posible (! Importante).
Tim-Erwin
2
@ICanHasKittenz Los menús desplegables todavía cambian el comportamiento cuando <768 px, se muestran en la barra de navegación (comportamiento contraído) dentro de aparecer en un cuadro blanco flotante (comportamiento no contraído) como era de esperar. Y el título del menú desplegable se ensancha cuando se hace clic, lo que obliga a otros elementos a desplazarse. Simplemente agregue un menú desplegable en un elemento de la barra de navegación y lo verá usted mismo.
Roubi
24

El nabvar colapsará en dispositivos pequeños. El punto de colapso está definido por @grid-float-breakpointin variables. De forma predeterminada, esto será antes 768px. Para pantallas por debajo del 768ancho de pantalla de píxeles, la barra de navegación se verá así:

ingrese la descripción de la imagen aquí

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

La forma más sencilla es personalizar bootstrap

encontrar variable:

 @grid-float-breakpoint

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

Para usuarios de SAAS

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

Gagan Gami
fuente
4
esto es realmente útil. Desafortunadamente, estoy usando el CDN de arranque, así que no puedo personalizar el archivo principal de arranque, ¿algún consejo sobre cómo hacer esto en un archivo css separado?
es
2
+1 para la variable @ grid-float-breakpoint-variable en la página de personalización de bootstrap, ¡eso me sirvió!
Wietse
4
Para usuarios de SASS: simplemente agregue sus variables personalizadas como $grid-float-breakpoint: 0px;antes de la @import "bootstrap.scss";línea
Duvrai
5

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

Coloque esto en el navbar-headerelemento después de 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>

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

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

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

Jeremy Cook
fuente
0

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;
  }
}
Michael Cintas
fuente
0

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
Cristi Draghici
fuente
0

Otra forma es simplemente eliminar collapse navbar-collapsedel 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>
Expandir fragmento

cavar
fuente