Comment changer le seuil d'effondrement de navbar en utilisant Twitter bootstrap-responsive?

Bootstrap > 2.1 & & < 3

• utilisez la version la moins chère de bootstrap
• changer la variable @navbarCollapseWidth dans les variables.moins de
• Recompile.

mise à Jour 2013: la voie de La facilité

• Visit http://getbootstrap.com/customize/#less-variables
• changement @navbarCollapseWidth dans le formfield
• cliquez sur"compiler et télécharger".

(MERCI à Archonic via commentaire)

mise à jour 2014: Bootstrap 3.1.1 et 3.2 (ils ont même ajouté à la documentation )

Si vous êtes personnalisation ou la suppression/édition .less des variables, vous êtes à la recherche pour:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

vous pouvez établir une nouvelle requête @media pour déposer les éléments navbar vers le bas comme vous le voyez bon, tout ce que vous avez à faire est de réinitialiser l'ancien pour accommoder votre nouvelle requête avec la largeur de goutte désirée. Prenez par exemple:

CSS

/** Modified Responsive CSS **/

@media (max-width: 979px) {
    .btn-navbar {
        display: none;
    }
    .navbar .nav-collapse {
        clear: none;
    }

    .nav-collapse {
        height: auto;
        overflow: auto;
    }

    .navbar .nav {
        float: left;
        margin: 0 10px 0 0;
    }

    .navbar .brand {
        margin-left: -20px;
        padding: 8px 20px 12px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: block;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 0;
        color: #999999;
        font-weight: normal;
        padding: 10px 10px 11px;
    }

    .navbar .nav > li {
        float: left;
    }

    .navbar .dropdown-menu {
        background-clip: padding-box;
        background-color: #FFFFFF;
        border-color: rgba(0, 0, 0, 0.2);
        border-radius: 0 0 5px 5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        display: none;
        float: left;
        left: 0;
        list-style: none outside none;
        margin: 0;
        min-width: 160px;
        padding: 4px 0;
        position: absolute;
        top: 100%;
        z-index: 1000;
    }

    .navbar-form, .navbar-search {
        border:none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: left;
        margin-bottom: 0;
        margin-top:6px;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: right;
        margin-left: auto;
    }
}

@media (max-width: 550px) {
    .btn-navbar {
        display: block;
    }
    .navbar .nav-collapse {
        clear: left;
    }

    .nav-collapse {
        height: 0;
        overflow: hidden;
    }

    .navbar .nav {
        float: none;
        margin: 0 0 9px;
    }

    .navbar .brand {
        margin: 0 0 0 -5px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar .dropdown-menu:before, .navbar .dropdown-menu:after {
        display: none;
    }

    .navbar .nav > li > a, .navbar .dropdown-menu a {
        border-radius: 3px 3px 3px 3px;
        color: #999999;
        font-weight: bold;
        padding: 6px 15px;
    }

    .navbar .nav > li {
        float: none;
    }

    .navbar .dropdown-menu {
        background-color: transparent;
        border: medium none;
        border-radius: 0 0 0 0;
        box-shadow: none;
        display: block;
        float: none;
        left: auto;
        margin: 0 15px;
        max-width: none;
        padding: 0;
        position: static;
        top: auto;
    }

    .navbar-form, .navbar-search {
        border-bottom: 1px solid #222222;
        border-top: 1px solid #222222;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
        float: none;
        margin: 9px 0;
        padding: 9px 15px;
    }

    .navbar .nav.pull-right {
        float: none;
        margin-left: 0;
    }

}

dans le code suivant vous pouvez voir comment j'ai inclus la requête originale @media qui gère la goutte avant la marque 979px et la nouvelle requête pour soutenir votre point de chute désiré de 550px . J'ai modifié la requête originale directement à partir du CSS Bootstrap-responsive pour réinitialiser tous les styles appliqués à cette requête spécifique pour les éléments navbar et les porté à la nouvelle requête qui porte le point de chute dont vous avez besoin à la place. De cette façon nous pouvons commuter tous les styles de la requête originale vers le bas à la nouvelle requête sans jouer autour dans la feuille de style Bootstrap-responsive, de cette façon les valeurs par défaut s'appliqueront toujours aux autres éléments dans votre document.

Voici une courte démo avec une requête multimédia définie pour passer à 550px comme vous le souhaitez: http://jsfiddle.net/wU8MW /

Note: j'ai placé les requêtes modifiées @media au-dessous du cadre css car le nouveau css modifié est supposé être chargé en premier que le CSS réactif.

bootstrap-sass supporte la variable $ navbarCollapseWidth dans la version suivante (2.2.1.0). Vous serez en mesure de le mettre à jour pour faire exactement ce que vous voulez une fois que cette version est en direct!

depuis août 2013, une page de Bootstrap 3 "Personnaliser et télécharger" se trouve à http://getbootstrap.com/customize/

avec Bootstrap 3, la variable pertinente est @grid-float-Break Point.

la page suivante sur le débordement de la pile contient des détails supplémentaires: Bootstrap 3 Navbar Collapse

je soupçonne (et j'espère) que cela sera bientôt mis en œuvre de manière officielle. En attendant je fais juste un hack CSS simple, en utilisant visible-phone sur le bouton de descente et visible-tablette sur une deuxième série de boutons que j'ai placé dans la barre de navigation. Donc avant ça ressemblait à ceci:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

et maintenant il ressemble à:

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

notez que l'ordre des éléments est important, sinon vous pourriez avoir des problèmes avec les éléments entrant dans le prochain ligne

j'ai créé un fichier SCSS séparé qui répertorie toutes les partiels dont bootstrap a besoin, de cette façon je peux activer et désactiver les partiels en fonction de ce dont notre site a besoin. De cette façon, je peux facilement modifier la variable breakpoint. Voilà ce que j'ai:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

Voici mon code (Toutes les autres solutions ont montré funky scrollbar comme le navbar est tombé donc j'ai modifié le code donc il ne l'a pas fait). Je n'ai pas pu poster sur autre réponse donc je vais le faire ici pour que d'autres trouvent. J'utilise des rails pour le faire avec Bootstrap 3.0.

assets/css/cadre et remplace coller ceci: (Ajuster la largeur maximale est de quelque valeur que ce soit pour atteindre votre objectif.)

@media (max-width: 2500px) {
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Bootstrap 3.x

en utilisant moins , vous pouvez changer la valeur de @screen-small pour cibler votre taille min

exemple: @screen-small: 600px;

Je l'utilise pour passer en mode "dispositif minuscule" une fois que la largeur est inférieure à 600px

Bootstrap 3.x

en utilisant SASS, vous pouvez changer la valeur de $screen-sm pour cibler votre taille de min

exemple: $screen-sm: 600px;

vous devez mettre cette valeur dans votre application.fichier scss avant le @import "bootstrap";

$screen-sm:600px;
@import "bootstrap";

moins de variables commencent par " @ "juste changé en" $ " pour les annuler avant l'importation.

Voici la liste des variables.

c'est un bon exemple de l'endroit où vous pourriez utiliser la version la moins chère des fichiers CSS de Bootstrap. Comment faire cela est ci-dessous.

serait encore mieux de soumettre ceci comme une demande de pull sur Github pour que tout le monde puisse en profiter et votre" code personnalisé " serait, espérons-le, une partie de Bootstrap pour aller de l'avant.

• ajouter une variable à variables.less qui spécifie quand effondrer la barre de navigation. Quelque chose comme: @navCollapseWidth: 979px
• modifier ensuite responsive-navbar.less ...
  • vers le haut de changement @media (max-width: 979px) à @media (max-width: @navCollapseWidth)
  • au bas de la page remplacer @media (min-width: 980px) par @media (max-width: @navCollapseWidth - 1)

bien sûr... vous devrez compiler moins en utilisant l'une des méthodes suggérées .

prendre tyler hack encore plus en ajoutant un visible-phone bloc classé et un caché-phone classe à un élément dans la navigation principale repliable, vous pouvez "tirer" un ou deux des éléments effondrés à afficher même dans la barre de navigation du téléphone.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a href="<%= root_url %>" class="brand brandtag"></a>
      <a class="btn btn-navbar visible-phone" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <div class="visible-tablet">
        <ul class="nav">
          <li>Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
      <div class="visible-phone">
        <ul class="nav">
          <li>Navigation 1</li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="hidden-phone">Navigation 1</li>
          <li>Navigation 2</li>
          <li>Navigation 3</li>
        </ul>
      </div>
    </div>
  </div>
</div>

il suffit d'écrire ce code dans votre style personnalisé.fichier css et il va travailler

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }