Bootstrap 3 Navbar Collapse

202

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

timhc22
la source
Pourquoi ne s'appliquent-ils pas?
PW Kad
il m'a semblé que le code lui-même avait été un peu changé
timhc22
Je ne suis pas tout à fait suivre. Le code CSS que vous voulez dire? Les cours devraient être généralement les mêmes avec quelques ajustements mineurs
PW Kad
ne vous inquiétez pas, je pense que je devenais confus à cause des téléchargements personnalisés (l'une des réponses, j'ai posté un lien pour spécifier un numéro de ligne spécifique à modifier)
timhc22
stackoverflow.com/a/23536146/563309 - a fonctionné pour moi, aidera quelqu'un ...
JenonD

Réponses:

335

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

Seb33300
la source
21
J'ai dû ajouter .navbar-collapse.collapse.in { display: block!important; }pour l'empêcher de disparaître. Bon travail cependant, ça m'a fait gagner des heures.
Dave Forber
2
Excellente alternative mais a dû ajouter .navbar-collapse.collapse.in {display: block! Important; margin-top: 0px; }
Mavis
4
Ce que j'aime à ce sujet, c'est que si je mets à niveau Bootstrap, je n'ai pas à me soucier de trouver la variable et de la recompiler.
ScubaSteve
6
mais les listes déroulantes étaient toujours en mode bureau, j'ai dû éditer le code sur la ligne 3934 pour max-with: 992 (dans bootstrap.css), j'utilise bootstrap 3.2. Juste au cas où quelqu'un en aurait besoin.
chandan
4
Cela ne semble pas gérer les dropdown-menuéléments de la barre de navigation.
alexw
142

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

jmbertucci
la source
quelle est la différence entre les versions bootstrap par défaut et personnalisées? Leurs structures de dossiers sont assez différentes et la version personnalisée ne contient que les fichiers CSS et JS car la version par défaut a beaucoup de dossiers, y compris MOINS. Je suis quelque peu confus.
Rahul Patwa
1
@RahulPatwa Si vous téléchargez la version complète de Bootstrap 3 Zip, vous obtiendrez tous les fichiers de développement avec. Ce sont les fichiers que les gens utilisent pour continuer à développer Bootstrap et incluent des éléments comme les fichiers de travail Composer et Grunt, les fichiers système git, les fichiers LESS, etc. Les fichiers complets se trouvent dans le dossier / dist. Vous verrez des dossiers pour /css, /js, /fonts. La personnalisation donne simplement les fichiers compilés que vous avez sélectionnés.
jmbertucci
donc si je télécharge le bootstrap complet et que j'apporte ensuite quelques changements dans moins de variables .. Comment puis-je le recompiler dans un fichier CSS?
Rahul Patwa
2
@RahulPatwa Il existe plusieurs façons de compiler MOINS. Le site Web LESS explique comment à la fois une méthode côté client et côté serveur. Crunch est une interface graphique simple que vous pouvez utiliser. Le site Web de Bootstrap recommande spécifiquement d'utiliser leur outil RECESS . Et il y a plus .
jmbertucci
9
La façon la plus simple consiste simplement à aller sur getbootstrap.com/customize redéfinir la valeur \ @ grid-float-breakpoint pour quelque chose de codé en dur (par exemple 520px) ou pour une taille d'écran plus petite comme \ @ screen-xs-min
neves
34

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!

mshahbazm
la source
2
La définition d'une valeur très petite, par exemple 1px, désactivera l'effondrement de la barre de navigation (par exemple, si vous voulez une barre de navigation non réactive).
Gregor Slavec
J'ai également défini ce paramètre sur '@ screen-xs-min' pour limiter le menu réduit à 480 pixels. Pour certains sites, cela fonctionne bien et crée un bel effet où vous pouvez facilement passer d'un menu complet à un menu réduit sur l'iPhone en changeant l'orientation.
chiappa
20

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

Doug Lee
la source
1
Si propre. Excellente solution. Merci.
Jedidiah Hurt
10

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;
    }
}
Daniel
la source
préfet solution css standard pour bootstrap 3.3.6, merci!
xxxbence
7

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.

Bastardo Sucio
la source
notez que les tailles sont désormais obsolètes et qu'il ne reste que -mincelles-ci: @ screen-md-min: 800px; @ screen-lg-min: 1200px; @ grid-float-breakpoint: @ screen-md-min;
Doug Lee
6

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.

PepitoSolis
la source
3

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 à:

entrez la description de l'image ici

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.

Bass Jobsen
la source
Comment utilisez-vous le stylet? Utilisez-vous github.com/Acquisio/bootstrap-stylus . Dans le dernier cas, vous devez faire de même que ci-dessus. Téléchargez les styles d'amorçage, modifiez le paramètre dans stylus / variables.styl etc. et recompilez.
Bass Jobsen
3

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; }
}
cdonner
la source
1

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.

Markus
la source
0

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;
}
}
jour de tony
la source
0

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.

Cosmin
la source