web-dev-qa-db-fra.com

Comment changer le seuil d'effondrement 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 les deux bootstrap.css et le bootstrap-responsive.css fichiers, ainsi que le bootstrap-collapse.js Javascript.

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

Cependant, ma barre de navigation a une bonne largeur d’environ 550 pixels de large, c’est-à-dire qu’elle n’a pas besoin d’être réduite sauf si l’écran est très étroit.

Comment est-ce que je dis à Bootstrap de ne réduire que la barre de navigation si la largeur de l'écran est inférieure à 550 pixels)?

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

cssruby-on-rails-3twitter-bootstrap
94
Mark Berry

Vous recherchez la ligne 239 du bootstrap-responsive.css

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

Où le max-width valeur déclenche le nav sensible. Changez-le à 550px ou plus et il devrait redimensionner bien.

41
methodofaction

Bootstrap> 2.1 && <3

  • Utilisez la version moins de bootstrap
  • Modifier la variable @navbarCollapseWidth dans variables.less
  • Recompiler.

Mise à jour 2013: le moyen le plus simple

(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 surchargez/modifiez .less variables, 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);
73
Bijan

Vous pouvez établir une nouvelle requête @media 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 le premier pour adapter votre nouvelle requête à la largeur de largage 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 requête d'origine @media Qui gère la suppression avant la marque 979px Et la nouvelle requête prenant en charge votre point de chute souhaité de 550px. J'ai modifié la requête d'origine directement à partir du fichier css réactif au bootstrap 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 transférés vers la nouvelle requête portant à la place le point de chute. De cette façon, nous pouvons commuter tous les styles de la requête d'origine vers la nouvelle requête sans perdre la feuille de style qui réagit au bootstrap. De cette manière, 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 en attente de suppression à 550px Selon vos besoins: http://jsfiddle.net/wU8MW/

Remarque: j'ai placé les requêtes @media Modifiées ci-dessus bien en dessous du cadre css, car le nouveau fichier css modifié est censé être chargé en premier lieu par rapport au fichier css réactif.

11
Andres Ilich

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

6
trisweb

Depuis août 2013, une page Bootstrap 3 "Personnalisez et téléchargez" peut être trouvée à 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

5
StackOverflowUser

Je soupçonne (et espère) que cela sera bientôt mis en place 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 second ensemble de boutons que j'ai placés dans la barre de navigation. Alors avant cela 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 ç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

4
Tyler

J'ai créé un fichier SCSS distinct répertoriant tous les partiels dont bootstrap a besoin, afin de pouvoir activer et désactiver les partiels en fonction des besoins de notre site. Ainsi, je peux remplacer la variable de point d'arrêt facilement Voici ce que j'ai obtenu:

// 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";
3
mae

Voici mon code (toutes les autres solutions montraient une barre de défilement funky alors que la barre de navigation descendait, j'ai donc modifié le code pour qu'il ne l'ait pas). Je ne pouvais pas poster de réponse, je le ferais ici pour que les autres le trouvent. J'utilise Rails pour faire cela avec Bootstrap 3.0.

assets/stylesheets/framework et les substitutions collent 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;
}
2
pirate694

Bootstrap 3.x

en utilisant SASS, vous pouvez changer 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 "@", il suffit de les remplacer par "$" pour les remplacer avant l'importation.

Voici la liste des variables.

1
coding addicted

Bootstrap 3.x

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

exemple: @screen-small: 600px;

j'utilise cela pour passer en mode "petit périphérique" une fois que la largeur est inférieure à 600px

1
JasonS

C’est un excellent exemple d’utilisation de la version LESS des fichiers CSS Bootstrap CSS). La procédure à suivre est décrite ci-dessous.

Mieux encore, soumettez ceci sous forme de requête d'extraction sur Github afin que tout le monde puisse en bénéficier et que votre "code personnalisé" fasse partie, espérons-le, de Bootstrap).

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

Bien sûr ... vous devriez compiler LESS en utilisant l’une des méthodes suggérées .

0
Jason Capriotti

Bootstrap 4.x

Il est facile de changer le seuil de repliement dans Bootstrap 4.x. Il y a 6 cas:

  1. Toujours développer, ne jamais réduire (c.-à-d. 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. Toujours réduire, ne jamais développer (c.-à-d. Que le point d'arrêt est ∞px). : <nav class="navbar">...</nav> _ (Il suffit de retirer le navbar-expand-* classe. Mobile-first en tant que Bootstrap 4.x)

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

0
jinhr

En poussant encore plus loin le bidouillage de tyler en ajoutant un bloc visible-phone classé et une classe hidden-phone à un élément de la navigation principale repliable, vous pouvez en "extraire" un ou deux des éléments réduits à 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>
0
althras

Il suffit de noter 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;
        }
    }
0
Ganpat Kakar