Comment changer le seuil de réduction de la barre de navigation à l'aide de Twitter bootstrap-responsive?

J'utilise Twitter Bootstrap 2.0.1 dans un projet Rails 3.1.2, implémenté avec bootstrap-sass. Je charge à la fois le bootstrap.csset les bootstrap-responsive.cssfichiers, ainsi que le bootstrap-collapse.jsJavascript.

J'ai une mise en page fluide avec une barre de navigation similaire à l' exemple . Ceci suit les instructions de "variation sensible" de la barre de navigation ici . Cela fonctionne bien: si la page est plus étroite que 940px environ, la barre de navigation se réduit et affiche un "bouton" sur lequel je peux cliquer pour agrandir.

Cependant, ma barre de navigation semble bonne jusqu'à environ 550 px de large, c'est-à-dire qu'elle n'a pas besoin d'être réduite à moins que l'écran ne soit très étroit.

Comment dire à Bootstrap de ne réduire la barre de navigation que si l'écran mesure moins de 550 pixels de large?

Notez que , à ce stade , je ne pas envie de modifier les autres comportements réactifs, par exemple des éléments d' empilage au lieu d'afficher côte à côte.

Vous recherchez la ligne 239 de bootstrap-responsive.css

@media (max-width: 979px) {...}

Où la max-widthvaleur déclenche le nav réactif. Changez-le en 550px environ et il devrait être redimensionné correctement.

Bootstrap> 2.1 && <3

• Utilisez la version less de bootstrap
• Modifiez la variable @navbarCollapseWidth dans variables.less
• Recompilez.

Mise à jour 2013: le moyen le plus simple

• Visitez http://getbootstrap.com/customize/#less-variables
• Modifiez @navbarCollapseWidth dans le champ de formulaire
• Cliquez sur "Compiler et télécharger".

(THX à Archonic via un commentaire)

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

Si vous personnalisez ou remplacez / modifiez des .lessvariables, vous recherchez:

//** 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 créer une nouvelle @mediarequête pour déposer les éléments de la barre de navigation comme bon vous semble, tout ce que vous avez à faire est de réinitialiser l'ancienne pour qu'elle s'adapte à votre nouvelle requête avec la largeur de dépôt souhaitée. Prenons ceci 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 @mediarequête d' origine qui gère le dépôt avant la 979pxmarque et la nouvelle requête pour prendre en charge le point de dépôt souhaité de 550px. J'ai modifié la requête d'origine directement à partir du css réactif au démarrage pour réinitialiser tous les styles appliqués à cette requête spécifique pour les éléments de la barre de navigation et les ai portés vers la nouvelle requête qui porte le point de dépôt dont vous avez besoin à la place. De cette façon, nous pouvons commuter tous les styles de la requête d'origine à la nouvelle requête sans déranger dans la feuille de style bootstrap-responsive, de cette façon les valeurs par défaut s'appliqueront toujours aux autres éléments de votre document.

Voici une courte démo avec une requête multimédia définie à 550pxvotre guise: http://jsfiddle.net/wU8MW/

Remarque: J'ai placé les @mediarequêtes modifiées ci-dessus bien en dessous du cadre css car le nouveau css modifié est censé être chargé en premier que le css réactif.

bootstrap-sass supportera la variable $ navbarCollapseWidth dans la prochaine version (2.2.1.0). Vous pourrez le mettre à jour pour faire exactement ce que vous voulez une fois que cette version sera en ligne!

Depuis août 2013, une page Bootstrap 3 «Personnaliser et télécharger» est disponible à l' adresse http://getbootstrap.com/customize/

Avec Bootstrap 3, la variable pertinente est @ grid-float-breakpoint.

La page de débordement de pile suivante 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 simple hack css, en utilisant visible-phone sur le bouton déroulant et visible-tablet sur un deuxième ensemble de boutons que j'ai placés dans la barre de navigation. Donc avant ça ressemblait à ça:

<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, ça 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 la ligne suivante

J'ai créé un fichier SCSS séparé qui répertorie tous les partiels dont le bootstrap a besoin, de cette façon je peux activer et désactiver les partiels en fonction des besoins de notre site. De cette façon, je suis capable de remplacer facilement la variable de point d'arrêt. Voici 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é une barre de défilement funky alors que la barre de navigation descendait, j'ai donc modifié le code pour que ce ne soit pas le cas). Je n'ai pas pu poster sur une autre réponse, je vais donc le faire ici pour que les autres la trouvent. J'utilise des rails pour faire cela avec Bootstrap 3.0.

assets / stylesheets / framework et remplacements collez ceci: (Ajustez la largeur maximale à n'importe quelle valeur 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 LESS , vous pouvez modifier la valeur de @screen-smallpour cibler votre taille minimale

exemple: @screen-small: 600px;

je l'utilise uniquement pour passer en mode "petit appareil" une fois que la largeur est inférieure à 600 px

Bootstrap 3.x

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

exemple: $ screen-sm: 600px;

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

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

Moins de variables commencent par "@" juste les changées en "$" pour les remplacer avant l'importation.

Voici la liste des variables.

Bootstrap 4.x

Changer le seuil de réduction dans Bootstrap 4.x est un jeu d'enfant. Il y a 6 cas:

1. Toujours développer, ne jamais réduire (c'est-à-dire que le point d'arrêt est 0px): <nav class="navbar navbar-expand">...</nav>
2. Le point d'arrêt est sm (576px):<nav class="navbar navbar-expand-sm">...</nav>
3. Le point d'arrêt est md (768px):<nav class="navbar navbar-expand-md">...</nav>
4. Le point d'arrêt est lg (992px):<nav class="navbar navbar-expand-lg">...</nav>
5. Le point d'arrêt est xl (1200px):<nav class="navbar navbar-expand-xl">.../nav>
6. Réduisez toujours, ne développez jamais (c'est-à-dire que le point d'arrêt est ∞px). : <nav class="navbar">...</nav>(Retirez simplement lenavbar-expand-* classe. Mobile-first comme dans Bootstrap 4.x)

Crédit à cet article de Carol Skelly, j'ai trouvé https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

Ceci est un excellent exemple où vous pourriez utiliser la version LESS des fichiers CSS Bootstrap. Comment faire cela est ci-dessous.

Encore mieux serait de soumettre ceci comme une pull request sur Github afin que tout le monde puisse en profiter et que votre "code personnalisé" fasse partie, espérons-le, de Bootstrap à l'avenir.

• Ajouter une variable à variables.less qui spécifie quand réduire la barre de navigation. Quelque chose comme:@navCollapseWidth: 979px
• Puis modifiez responsive-navbar.less...
  • Changement en haut @media (max-width: 979px)de@media (max-width: @navCollapseWidth)
  • En bas, changez @media (min-width: 980px)pour@media (max-width: @navCollapseWidth - 1)

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

En poussant encore plus loin le piratage de Tyler en ajoutant un bloc de classe de téléphone visible et une classe de téléphone caché à un élément dans la navigation principale pliable, vous pouvez `` extraire '' un ou deux des éléments réduits pour les 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>

Écrivez simplement ce code dans votre fichier style.css personnalisé et cela fonctionnera

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