web-dev-qa-db-fra.com

Bootstrap 3 - désactive la réduction de la barre de navigation

Ceci est ma barre de navigation 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>

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

Je voudrais éviter d’écrire 300 000 lignes de CSS pour redéfinir les styles par défaut.

Toute suggestion?

csstwitter-bootstrap-3navbarcollapsepreventdefault
86
itsme

Après avoir examiné de près, pas 300 000 lignes, mais 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 respect:

  1. La propriété par défaut .collapse dans bootstrap masque le côté droit du menu pour les tablettes (paysage) et les téléphones. À la place, un bouton bascule s'affiche pour le masquer/l'afficher. Ainsi, cette propriété remplace la valeur par défaut et affiche en permanence ces éléments.

  2. Pour que le menu de droite apparaisse sur la même ligne avec le côté gauche, il faut que le côté gauche soit flottant à gauche.

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

  4. Ceci maintient le menu de droite à droite tandis que les éléments internes (li) suivront la propriété 2. Nous avons donc à gauche float left et right- side flotte à droite ce qui les met en ligne.

133
AyB

La nabvar va s'effondrer sur de petits appareils. Le point de réduction est défini par @grid-float-breakpoint dans les variables. Par défaut, ce sera avant 768px. Pour les écrans inférieurs à la largeur d'écran 768 pixels, la barre de navigation se présentera comme suit:

enter image description here

Il est possible de changer le @grid-float-breakpoint dans variables.less et de recompiler Bootstrap. Ce faisant, vous devrez également changer @screen-xs-max dans navbar.less. Vous devrez définir cette valeur sur votre nouveau @grid-float-breakpoint -1. Voir aussi: https://github.com/twbs/bootstrap/pull/10465 . Ceci est nécessaire pour changer les formulaires de la barre de navigation et les menus déroulants au point de rupture @ grid-float-en leur version mobile.

Le moyen le plus simple est de personnaliser le bootstrap

trouver une variable:

 @grid-float-breakpoint

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

Pour les utilisateurs de SAAS

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

24
Gagan Gami

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

Placez ceci dans l'élément navbar-header 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>

Ajouter 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-right peut être utilisé pour trier les éléments visuellement, mais il n'est pas garanti de le tirer vers la partie la plus à droite de l'écran. Le violon démontre ce comportement avec le navbar-form.

5
Jeremy Cook

Si vous n'utilisez pas la version less, voici la ligne à 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;
  }
}
0
Michael Ribbons

Une autre méthode consiste simplement à supprimer collapse navbar-collapse du 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>
0
digout

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

ajoutez ensuite 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
0
Cristi Draghici