Bootstrap 3 Navbar Collapse

Existe-t-il un moyen d'augmenter le point auquel la barre de navigation du bootstrap 3 s'effondre (c'est-à-dire pour qu'elle s'effondre en une liste déroulante sur les tablettes de portrait)?

Ces deux étaient applicables au bootstrap 2 mais pas maintenant!

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

Modifier le point d'arrêt réactif de la barre de navigation par défaut

J'ai eu le même problème aujourd'hui.

Bootstrap 4

C'est une fonctionnalité native: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

Vous devez utiliser des .navbar-expand{-sm|-md|-lg|-xl}classes:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

@media (max-width: 991px) {
    .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-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Il suffit de changer 991pxpar 1199pxdes mdtailles.

Démo

La grande différence entre Bootstrap 2 et Bootstrap 3 est que Bootstrap 3 est "mobile first".

Cela signifie que les styles par défaut sont conçus pour les appareils mobiles et dans le cas de Navbars, cela signifie qu'il est "réduit" par défaut et "se développe" lorsqu'il atteint une certaine taille minimale.

Le site de Bootstrap 3 a en fait une "indication" de ce qu'il faut faire: http://getbootstrap.com/components/#navbar

Personnaliser le point de repli

Selon le contenu de votre barre de navigation, vous devrez peut-être modifier le point auquel votre barre de navigation bascule entre le mode réduit et le mode horizontal. Personnalisez la variable @ grid-float-breakpoint ou ajoutez votre propre requête multimédia.

Si vous allez recompiler votre MOINS, vous trouverez la variable MOINS notée dans le variables.lessfichier. Il est actuellement configuré pour "s'étendre" @media (min-width: 768px)qui est un "petit écran" (c'est-à-dire une tablette) selon les termes de Bootstrap 3.

@grid-float-breakpoint: @screen-tablet;

Si vous souhaitez conserver l'effondrement un peu plus longtemps, vous pouvez l'ajuster comme ceci:

@grid-float-breakpoint: @screen-desktop; (Point d'arrêt 992px)

ou développez plus tôt

@grid-float-breakpoint: @screen-phone (Point d'arrêt 480px)

Si vous souhaitez le développer plus tard et ne pas avoir à recompiler le MOINS, vous devrez remplacer les styles appliqués à la 768pxrequête multimédia et les faire revenir à la valeur précédente. Ajoutez-les ensuite au moment opportun.

Je ne sais pas s'il y a une meilleure façon de le faire. Recompiler le Bootstrap MOINS à vos besoins est la meilleure façon (la plus simple). Sinon, vous devrez trouver toutes les requêtes multimédia CSS qui affectent votre barre de navigation, les remplacer par des styles par défaut à la largeur de 768 pixels, puis les rétablir à une largeur minimale plus élevée.

Recompiler le MOINS fera toute cette magie pour vous juste en changeant la variable. Ce qui est à peu près le point des pré-compilateurs LESS / SASS. =)

(Remarque, je les ai tous recherchés, il s'agit d'environ 100 lignes de code, ce qui est assez ennuyeux pour moi de laisser tomber l'idée et de recompiler Bootstrap pour un projet donné et d'éviter de gâcher quelque chose par accident)

J'espère que ça aide!

À votre santé!

Le moyen le plus simple est de personnaliser le bootstrap

trouver variable:

 @grid-float-breakpoint

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

ceux-ci sont contrôlés en variables, pas besoin de fouiner dans la source. avec bootstrap, essayez d'abord les variables, puis redéfinissez. puis revenez en arrière et réessayez les variables;)

j'ai utilisé bootstrap-sass avec rails, mais c'est la même chose avec le MOINS par défaut.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

c'est tout! cette page de référence des variables est super pratique: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Grâce à Seb33300, j'ai pu faire fonctionner ça. Cependant, une partie importante semble faire défaut. Au moins dans Bootstrap version 3.1.1.

Mon problème était que la barre de navigation s'est effondrée en conséquence à la bonne largeur, mais le bouton de menu n'a pas fonctionné. Je n'ai pas pu développer et réduire le menu.

Cela est dû au fait que la classe collapse.in est remplacée par le! Important dans .navbar-collapse.collapse et peut être résolue en ajoutant également le "collapse.in". Exemple de Seb33300 complété ci-dessous:

@media (max-width: 991px) {
    .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;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Je voulais voter et commenter la réponse de jmbertucci, mais je n'ai pas encore confiance dans les commandes. J'ai eu le même problème et l'ai résolu comme il l'a dit. Si vous utilisez Bootstrap 3.0, modifiez les variables LESS dans variables.less Les points d'arrêt réactifs sont définis autour de la ligne 200:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Définissez ensuite la valeur de réduction de la barre de navigation à l'aide de la variable @ grid-float-breakpoint à environ la ligne 232. Par défaut, elle est définie sur @ screen-tablet . Si vous le souhaitez, vous pouvez utiliser une valeur en pixels, mais je préfère utiliser les variables MOINS.

Si le problème auquel vous êtes confronté est le menu divisé en plusieurs lignes , vous pouvez essayer l'une des options suivantes:

1) Essayez de réduire le nombre d'éléments de menu ou leur longueur, comme supprimer des éléments de menu ou raccourcir les mots.

2) Réduire le remplissage entre les éléments du menu, comme ceci:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

Le rembourrage par défaut est de 15px des deux côtés (gauche et droite).

Si vous préférez changer chaque utilisation individuelle:

padding-left: 7px; 
padding-right: 8px;

Ce paramètre affecte également la liste déroulante.

Cela ne répond pas à la question, mais cela pourrait aider ceux qui ne veulent pas jouer avec le CSS ou utiliser moins de variables. Les deux approches courantes pour résoudre ce problème.

Le nabvar s'effondrera sur les petits appareils. Le point d'effondrement 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 de 768 pixels, la barre de navigation ressemblera à:

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

Je suis préoccupé par les problèmes de maintenance et de mise à niveau à venir de la personnalisation de Bootstrap. Je peux documenter les étapes de personnalisation aujourd'hui et espérer que la personne mettant à niveau Bootstrap dans trois ans trouvera la documentation et réappliquera les étapes (qui peuvent ou non fonctionner à ce stade). Un argument peut être fait dans les deux sens, je suppose, mais je préfère conserver toutes les personnalisations dans mon code.

Cependant, je ne comprends pas très bien comment l'approche de Seb33300 peut fonctionner. Cela n'a certainement pas fonctionné avec Bootstrap 4.0.3. Pour que la barre de navigation s'étende à 1200 au lieu de 768, les règles des deux requêtes multimédias doivent être remplacées pour empêcher une expansion à 768 et une expansion forcée à 1200.

J'ai un menu plus long qui s'enroulerait sur l'iPad en mode Portrait. Les éléments suivants conservent le menu réduit jusqu'au point d'arrêt 1200:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

J'ai fait la manière CSS avec mon installation de Bootstrap 3.0.0, car je ne connais pas LESS. Voici le code que j'ai ajouté à mon fichier css personnalisé (que je charge après bootstrap.css) qui m'a permis de contrôler ainsi le menu fonctionnait toujours comme un accordion.
Remarque: J'ai enveloppé tout mon contenu navbardans un div avec la classe sidebarpour séparer le comportement que je voulais afin qu'il n'affecte pas les autres barres de navigation sur mon site, comme le menu principal. Adaptez-vous à vos besoins, j'espère que cela vous sera utile.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Remarque supplémentaire: j'ai également ajouté une modification à la bascule du menu principal navbar(puisque le code ci-dessus sur mon site est utilisé pour un "sous-menu" sur le côté.

J'ai changé:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

dans:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

Et puis également ajusté:

<div class="navbar-collapse collapse navbar-collapse">

dans:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

Si vous n'en avez qu'un, navbarje suppose que vous n'aurez pas à vous en préoccuper, mais cela m'a aidé dans mon cas.

Et pour ceux qui veulent réduire à une largeur inférieure à la 768px standard (développer à une largeur inférieure à 768px), voici le CSS nécessaire:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

Je pense avoir trouvé une solution simple pour changer le point d'arrêt d'effondrement, uniquement via css.

J'espère que d'autres pourront le confirmer car je ne l'ai pas testé à fond et je ne sais pas s'il y a des effets secondaires à cette solution.

Vous devez modifier les valeurs de requête multimédia pour les définitions de classe suivantes:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

C'est ce qui a fonctionné pour moi sur mon projet actuel, mais j'ai encore besoin de modifier certaines définitions CSS pour organiser correctement le menu pour toutes les tailles d'écran.

J'espère que cela t'aides.