Comment modifier le seuil d'effondrement de la barre de navigation en utilisant Twitter bootstrap-responsive ?

Question

J'utilise Twitter Bootstrap 2.0.1 dans un projet Rails 3.1.2, implémenté avec bootstrap-sass. Je charge à la fois le fichier bootstrap.css et le bootstrap-responsive.css ainsi que les fichiers bootstrap-collapse.js Javascript.

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

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

Comment puis-je dire à Bootstrap de ne réduire la barre de navigation que si l'écran a une largeur inférieure à 550px ?

Notez qu'à ce stade, je ne no vous souhaitez modifier les autres comportements réactifs, par exemple en empilant des éléments au lieu de les afficher côte à côte.

Answer 1

Bootstrap > 2.1 && < 3

• Utiliser la version allégée de bootstrap
• Modifier la variable @navbarCollapseWidth dans variables.less
• Recompiler.

Mise à jour 2013 : La méthode la plus simple

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

(THX à 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 de remplacer/modifier .less 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);

Answer 2

Vous recherchez la ligne 239 de bootstrap-responsive.css

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

Où le max-width déclenche la navigation réactive. Modifiez-la à 550px environ et le redimensionnement devrait se faire sans problème.

Answer 3

Vous pouvez établir un nouveau @media pour faire descendre les éléments de la barre de navigation comme bon vous semble, il vous suffit de réinitialiser l'ancienne requête pour l'adapter à votre nouvelle requête avec la largeur de chute souhaitée. Prenons l'exemple suivant :

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 l'original @media qui traite la chute avant la requête 979px et la nouvelle requête pour soutenir le point de chute souhaité de 550px . J'ai modifié la requête originale directement à partir de la css bootstrap-responsive pour réinitialiser tous les styles appliqués à cette requête spécifique pour les éléments de la barre de navigation et les porter à la nouvelle requête qui porte le point de chute dont vous avez besoin à la place. De cette façon, nous pouvons transférer tous les styles de la requête originale vers la nouvelle requête sans avoir à manipuler 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 brève démonstration avec une requête de média définie pour déposer à 550px selon vos besoins : http://jsfiddle.net/wU8MW/

Note : J'ai placé le texte modifié ci-dessus @media Les requêtes se trouvent bien en dessous du cadre css, car le nouveau css modifié est censé être chargé en premier, avant le css réactif.

Answer 4

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

Answer 5

Depuis août 2013, une page Bootstrap 3 "Customize and download" est disponible à l'adresse suivante http://getbootstrap.com/customize/

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

La page Stack Overflow suivante contient des détails supplémentaires : Bootstrap 3 Navbar Collapse