Bootstrap 3 Navbar Collapse
Existe-t-il un moyen d’augmenter le point auquel la barre de navigation 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 à bootstrap 2 mais pas maintenant!
Change le point d'arrêt par défaut de la barre de navigation réactive
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 les classes .navbar-expand{-sm|-md|-lg|-xl}:
<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 991px par 1199px pour les tailles md.
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 que, dans le cas des barres de navigation, ils sont "réduits" par défaut et "développés" dès qu'ils atteignent une certaine taille minimale.
Le site de Bootstrap 3 contient en fait un "indice" sur ce qu'il faut faire: http://getbootstrap.com/components/#navbar
Personnaliser le point de réduction
Selon le contenu de votre barre de navigation, vous devrez peut-être modifier le point auquel votre barre de navigation bascule entre le mode replié et le mode horizontal. Personnalisez la variable @ grid-float-breakpoint ou ajoutez votre propre requête multimédia.
Si vous recompilez votre LESS, vous trouverez la variable LESS notée dans le fichier variables.less. Il est actuellement réglé sur "expand" @media (min-width: 768px), qui est un "petit écran" (c'est-à-dire une tablette) avec Bootstrap 3 termes.
@grid-float-breakpoint: @screen-tablet;
Si vous souhaitez conserver l’effondrement un peu plus longtemps, vous pouvez l’ajuster comme suit:
@grid-float-breakpoint: @screen-desktop; (point d'arrêt de 992px)
ou développer plus tôt
@grid-float-breakpoint: @screen-phone (point d'arrêt 480px)
Si vous souhaitez le développer ultérieurement et ne pas traiter de la recompilation du LESS, vous devrez écraser les styles appliqués à la requête de média 768px et les faire revenir à la valeur précédente. Puis rajoutez-les au moment opportun.
Je ne suis pas sûr s'il y a une meilleure façon de le faire. Recompiler le Bootstrap MOINS selon vos besoins est le meilleur moyen (le plus simple). Sinon, vous devrez rechercher toutes les requêtes de média CSS qui affectent votre barre de navigation, les remplacer par des styles par défaut d'une largeur de 768 pixels, puis les rétablir à une largeur minimale plus grande.
La recompilation de LESS fera toute cette magie pour vous simplement en modifiant la variable. Ce qui est à peu près le but des pré-compilateurs LESS/SASS. =)
(remarque, je les ai tous regardés, il s'agit d'environ 100 lignes de code, ce qui est assez ennuyeux pour que je laisse tomber l'idée et que je recompile simplement Bootstrap pour un projet donné et éviter de gâcher quelque chose par accident)
J'espère que ça aide!
À votre santé!
Le moyen le plus simple est de personnaliser l'amorçage
trouver une variable:
@grid-float-breakpoint
qui est réglé sur @ screen-sm, vous pouvez le modifier en fonction de vos besoins. J'espère que ça aide!
ceux-ci sont contrôlés dans les variables, pas besoin de fouiller dans la source. avec bootstrap, essayez d’abord les variables, puis remplace. puis revenez en arrière et essayez à nouveau les variables;)
j'ai utilisé bootstrap-sass avec Rails, mais c'est la même chose avec le défaut, LESS.
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 ça! cette page de référence des variables est très pratique: https://github.com/twbs/bootstrap/blob/master/less/variables.less
Merci à Seb33300, ça a fonctionné. Cependant, une partie importante semble manquer. 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 ne fonctionnait pas. Je ne pouvais pas développer et réduire le menu.
En effet, la classe collapse.in est surchargé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 contrôles. J'ai eu le même problème et résolu comme il l'a dit. Si vous utilisez Bootstrap 3.0, modifiez les variables LESS dans variables.less. Les points de rupture 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 pour la barre de navigation à l'aide de la touche @ grille-float-breakpoint variable à peu près à la ligne 232. Par défaut, il est défini sur @ tablette-écran . Si vous le souhaitez, vous pouvez utiliser une valeur de pixel, mais je préfère utiliser les variables LESS.
Si le problème auquel vous êtes confronté est le menu divisé en plusieurs lignes, vous pouvez essayer l’une des méthodes suivantes:
1) Essayez de réduire le nombre d’éléments de menu ou leur longueur, par exemple en supprimant des éléments de menu ou en raccourcissant les mots.
2) Réduire le remplissage entre les éléments de 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 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 les personnes qui ne veulent pas jouer avec les CSS ou utiliser des variables LESS. Les deux approches communes pour résoudre ce problème.
La personnalisation de Bootstrap me préoccupe par la suite en ce qui concerne les problèmes de maintenance et de mise à niveau. Je peux documenter les étapes de personnalisation aujourd'hui et espérer que la personne effectuant la mise à niveau Bootstrap dans trois ans trouvera la documentation et réappliquera les étapes (qui peuvent ne pas fonctionner à ce stade). Je suppose qu'un argument peut être fait de toute façon, mais je préfère conserver les personnalisations dans mon code.
Je ne comprends pas très bien comment l'approche de Seb33300 peut fonctionner, cependant. Cela ne fonctionnait certainement pas avec Bootstrap 4.0.3. Pour que la barre de navigation se développe à 1200 au lieu de 768, les règles des deux requêtes de support doivent être remplacées afin d’empêcher l’extension à 768 et l’obliger à développer à 1200.
J'ai un menu plus long qui permet de boucler 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; }
}
La nabvar va s'effondrer sur de petits appareils. Le point de réduction est défini par @ grid-float-breakpoint dans les variables. Par défaut, ce sera avant 768px. Pour les écrans dont la largeur est inférieure à 768 pixels, la barre de navigation se présentera comme suit:
Il est possible de changer le point d'arrêt @ grid-float-dans variable.less et de recompiler Bootstrap. Ce faisant, vous devrez également changer @ screen-xs-max dans navbar.less. Vous devrez définir cette valeur sur votre nouveau @ grid-float-breakpoint -1. Voir aussi: https://github.com/twbs/bootstrap/pull/10465 . Ceci est nécessaire pour changer les formulaires de la barre de navigation et les menus déroulants au point de rupture @ grid-float-en leur version mobile.
J'ai utilisé la méthode CSS avec mon installation de Bootstrap 3.0.0, car je ne connais pas très bien LESS. Voici le code que j'ai ajouté à mon fichier CSS personnalisé (que je charge après bootstrap.css) et qui m'a permis de contrôler si le menu fonctionnait toujours comme un accordion.
Note: J'ai enveloppé tout mon navbar dans une div avec la classe sidebar pour séparer le comportement que je voulais afin qu'il n'affecte pas les autres barres de navigation de mon site, comme le menu principal. Adaptez-vous à vos besoins, espérons que cela vous aidera.
/* 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 aussi ajusté:
<div class="navbar-collapse collapse navbar-collapse">
dans:
<div class="navbar-collapse collapse navbar-collapse-topmenu">
Si vous n’avez qu’un seul navbar je suppose que vous n’aurez pas à vous inquiéter à ce sujet, mais cela m’a aidé dans mon cas.
Je pense avoir trouvé une solution simple pour changer le point d'arrêt de l'effondrement, uniquement via CSS.
J'espère que d'autres pourront le confirmer car je ne l'ai pas testée à fond et je ne suis pas sûr que cette solution ait des effets secondaires.
Vous devez modifier les valeurs de la 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 je dois encore modifier certaines définitions CSS pour organiser le menu correctement pour toutes les tailles d'écran.
J'espère que cela t'aides.
Et pour ceux qui veulent s’effondrer à une largeur moins que la norme 768px (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;
}
}