Bootstrap 3 - Désactiver la réduction de la barre de navigation

88

Ceci est ma simple barre de navigation:

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

Je voudrais juste éviter que cela ne s'effondre, car je n'en ai pas besoin, comment faire?

Je voudrais éviter d'écrire 300K lignes de CSS pour remplacer les styles par défaut.

Toute suggestion?

css twitter-bootstrap-3 navbar collapse preventdefault c'est moi
la source

Réponses:

137

Après un examen approfondi, pas 300k lignes, mais il y a environ 3-4 propriétés CSS que vous devez remplacer:

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

Et avec cela, votre menu ne s'effondrera pas.

DÉMO ( jsfiddle )

EXPLICATION

Les quatre propriétés CSS font le respectif:

  1. La .collapsepropriété par défaut dans bootstrap masque le côté droit du menu pour les tablettes (paysage) et les téléphones et à la place un bouton bascule est affiché pour le masquer / l'afficher. Ainsi, cette propriété remplace la valeur par défaut et affiche ces éléments de manière persistante.

  2. Pour que le menu de droite apparaisse sur la même ligne avec le côté gauche, nous avons besoin que le côté gauche flotte à gauche.

  3. Cette propriété est présente par défaut dans le bootstrap mais pas sur la résolution tablette (portrait) à téléphone. Vous pouvez sauter celui-ci, cela n'affectera probablement pas votre barre de navigation globale.

  4. Cela garde le menu de droite à droite tandis que les éléments internes ( li) suivront la propriété 2. Nous avons donc un flotteur gauche à gauche et un flotteur droit à droite qui les amène sur une seule ligne.

AyB
la source
2
@gwho Je viens d'ajouter une explication à la réponse.
AyB
1
Si cela devient assez maigre, les éléments flottants gauche et droit flottants peuvent s'enrouler les uns sur les autres (je parle des uls pas des lis). Quelle est la meilleure façon d'éviter que cela ne se produise?
ahnbizcad
2
Si votre seule exigence est d'éviter que la liste UL / LI ne devienne verticale, le 2ème CSS est tout ce qui est nécessaire.
JamesB
1
Les !importantdéclarations ne sont pas nécessaires ici, pour moi cela fonctionne sans. Essayez de les éviter autant que possible (! Important).
Tim-Erwin
2
Les menus déroulants @ICanHasKittenz changent toujours de comportement lorsque <768 px, ils sont affichés dans la barre de navigation (par défaut réduit) à l'intérieur ou dans une boîte blanche flottante (comportement non réduit) comme on pouvait s'y attendre. Et le titre de la liste déroulante s'élargit lorsque l'utilisateur clique dessus, forçant d'autres éléments à se déplacer. Ajoutez simplement une liste déroulante dans un élément de la barre de navigation et vous le verrez par vous-même.
Roubi
24

Le nabvar s'effondrera sur les petits appareils. Le point de réduction est défini par des @grid-float-breakpointvariables. Par défaut, ce sera avant 768px. Pour les écrans inférieurs à la 768largeur de l'écran en pixels, la barre de navigation ressemblera à ceci:

entrez la description de l'image ici

Il est possible de modifier les @grid-float-breakpointvariables in.less et de recompiler Bootstrap. En faisant cela, vous devrez également changer @screen-xs-maxdans navbar.less. Vous devrez définir cette valeur sur votre nouveau @grid-float-breakpoint -1. Voir également: https://github.com/twbs/bootstrap/pull/10465 . Cela est nécessaire pour modifier les formulaires et les listes déroulantes de la barre de navigation du @ grid-float-breakpoint vers leur version mobile également.

Le moyen le plus simple est de personnaliser le bootstrap

rechercher la variable:

 @grid-float-breakpoint

défini sur @screen-sm, vous pouvez le modifier en fonction de vos besoins. J'espère que ça aide!

Pour les utilisateurs SAAS

ajoutez vos variables personnalisées comme $grid-float-breakpoint: 0px;avant le@import "bootstrap.scss";

Gagan Gami
la source
4
c'est vraiment utile malheureusement j'utilise le CDN bootstrap donc je ne peux pas personnaliser le fichier principal bootstrap, un conseil sur la façon de faire cela dans un fichier css séparé?
itsme
2
+1 pour la variable @ grid-float-breakpoint-variable sur la page de personnalisation de bootstrap, cela a fait l'affaire pour moi!
Wietse
4
Pour les utilisateurs SASS: ajoutez simplement vos variables personnalisées comme $grid-float-breakpoint: 0px;avant la @import "bootstrap.scss";ligne
Duvrai
5

Voici une approche qui laisse le comportement de repli par défaut inchangé tout en permettant à une nouvelle section de navigation de rester toujours visible. C'est une augmentation de navbar; navbar-header-menuest une classe CSS que j'ai créée et ne fait pas partie de Bootstrap proprement dit.

Placez-le dans l' navbar-headerélément après 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>

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

Vérifiez le violon: http://jsfiddle.net/L2txunqo/

Mise en garde: navbar-rightpeut être utilisé pour trier les éléments visuellement, mais il n'est pas garanti de tirer l'élément vers la partie la plus à droite de l'écran. Le violon démontre ce comportement avec le navbar-form.

Jeremy Cook
la source
0

Si vous n'utilisez pas la version less, voici la ligne que vous devez modifier:

@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;
  }
}
Rubans Michael
la source
0

La solution suivante a fonctionné pour moi dans 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;
}

puis ajoutez la classe .no-collapse à chacune des listes et la classe .off au conteneur principal. Voici un exemple écrit 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
la source
0

Une autre façon consiste simplement à supprimer collapse navbar-collapsedu balisage. Exemple avec 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>
Développer l'extrait

déterrer
la source