Bootstrap 3 Navbar Effondrement

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

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" effondré "par défaut et" se dilate " quand il atteint une certaine taille minimale.

le site de Bootstrap 3 a en fait un "indice" sur ce qu'il faut faire: http://getbootstrap.com/components/#navbar

personnaliser le point d'effondrement

selon le contenu de votre navbar, vous pourriez avoir besoin de changer le point où votre navbar passe entre le mode effondré et horizontal. Personnalisez la variable @grid-float-breakpoint ou ajoutez votre propre requête multimédia.

si vous voulez recompiler votre moins, vous trouverez la variable moins notée dans le fichier variables.less . Il est actuellement à "élargir" @media (min-width: 768px) qui est un "petit écran" (ie. une tablette) par Bootstrap 3 termes.

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

si vous voulez garder l'écroulé un peu plus longtemps, vous pouvez l'ajuster comme ceci:

@grid-float-breakpoint: @screen-desktop; (992px point de rupture)

or expand earlier

@grid-float-breakpoint: @screen-phone (480px point de rupture)

si vous voulez qu'il se développe plus tard, et ne pas traiter avec la recompilation le moins, vous devrez réécrire les styles qui sont appliqués à la requête 768px et les faire revenir à la valeur précédente. Puis rajoutez-les au moment opportun.

Je ne suis pas sûr qu'il y ait une meilleure façon de le faire. Recompiler le Bootstrap moins à vos besoins est la meilleure façon (la plus facile). Sinon, vous devrez trouver toutes les requêtes css media qui affectent votre Navbar, les écraser sur les styles par défaut @ la largeur 768px et ensuite les retourner à une valeur plus élevée min-width.

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

(note, je les ai tous cherchés, il s'agit d'environ 100 lignes de code, ce qui est assez agaçant pour que je laisse tomber l'idée et juste re-compiler Bootstrap pour un projet donné et éviter de gâcher quelque chose par accident)

j'espère que ça aidera!

santé!

la façon la plus facile est de personnaliser bootstrap

trouver la variable:

 @grid-float-breakpoint

qui est réglé sur @screen-sm, vous pouvez le changer en fonction de vos besoins. Espérons que cela aide!

ceux-ci sont contrôlés en variables, pas besoin de se faufiler dans la source. avec bootstrap, essayez les variables d'abord, puis les overrides. puis revenir en arrière et essayer de variables à nouveau ;)

j'ai utilisé bootstrap-sass avec les rails, mais c'est la même chose avec les 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 ça! cette page de référence des variables est très pratique: https://github.com/twbs/bootstrap/blob/master/less/variables.less

grâce à Seb33300 j'ai réussi. Toutefois, une partie importante semble être manquant. Au moins dans la version 3.1.1 de Bootstrap.

mon problème était que le navbar s'est effondré en conséquence à la bonne largeur, mais le bouton de menu n'a pas fonctionné. Je n'ai pas pu étendre et réduire le menu.

c'est à cause de l'effondrement.en classe est supplanté par le !important dans .navbar-collapsus.l'effondrement, et peut être résolu en ajoutant de l'effondrement.". Exemple de Seb33300 rempli 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 mettre en garde et commenter la réponse de jmbertucci, mais je ne suis pas encore digne de confiance avec les contrôles. J'ai eu le même problème et l'a résolu, comme il le dit. Si vous utilisez Bootstrap 3.0, Éditez les variables les moins nombreuses.moins les points de rupture réactifs sont fixés 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éfinit ensuite la valeur d'effondrement pour la barre de navigation en utilisant la variable @grid-float-Break Point aux environs de la ligne 232. Par défaut il est réglé sur @l'écran-tablette . Si vous voulez, vous pouvez utiliser une valeur de pixel, mais je préfère utiliser les variables LESS.

si le problème que vous rencontrez est le menu se décomposant en plusieurs lignes , vous pouvez essayer l'un des suivants:

1) Essayez de réduire le nombre d'éléments du menu ou leur longueur, comme supprimer des éléments du menu ou raccourcir 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 remplissage par défaut est de 15px des deux côtés (gauche et droite).

si vous préférez pour modifier chaque utilisation secondaire:

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 autres qui ne veulent pas jouer avec la CSS ou utiliser moins de variables. Les deux approches 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 dont la largeur est inférieure à 768 pixels, la barre de navigation ressemblera à:

il est possible de changer le point de rupture @grid-float dans les variables.moins et recompiler Bootstrap. En faisant cela, vous devrez aussi changer @screen-xs-max dans navbar.peu. Vous aura pour définir cette valeur à votre nouveau @grille-float--1 point d'arrêt. Voir aussi: https://github.com/twbs/bootstrap/pull/10465 . Cela est nécessaire pour changer les formes navbar et les chutes à la @grid-float-breakpoint à leur version mobile aussi.

je suis préoccupé par les problèmes d'entretien et de mise à niveau en aval de la personnalisation Bootstrap. Je peux documenter les étapes de personnalisation aujourd'hui et j'espère que la personne qui mettra à niveau Bootstrap dans trois ans trouvera la documentation et réappliquera les étapes (qui peuvent ou non fonctionner à ce moment-là). Un argument peut être fait de toute façon, je suppose, mais je préfère garder toutes les personnalisations dans mon code.

Je ne comprends pas comment L'approche de Seb33300 peut fonctionner, bien. Il 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 pour les deux requêtes médias doivent être dépassées pour empêcher l'expansion à 768 et forcer l'expansion à 1200.

j'ai un menu plus long qui envelopperait l'iPad en mode Portrait. Ce qui suit maintient le menu effondré jusqu'au point de rupture de 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 le chemin CSS avec mon installation de Bootstrap 3.0.0, puisque je ne suis pas si familier avec moins. Voici le code que j'ai ajouté à mon fichier CSS personnalisé (que je charge après bootstrap.css) ce qui m'a permis de contrôler donc le menu fonctionnait toujours comme un accordion .

Note: j'ai enveloppé mon tout navbar à l'intérieur d'un div avec la classe sidebar pour séparer le comportement que je voulais afin qu'il n'affecte pas d'autres navbars sur mon site, comme le menu principal. Adaptez-vous à vos besoins, en espérant 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;
}

note supplémentaire: j'ai également ajouté un changement à la bascule du menu principal navbar (depuis 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 ensuite également 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 en inquiéter, mais cela m'a aidé dans mon cas.

et pour ceux qui veulent s'effondrer à une largeur moins que la norme 768px (étendre à une largeur inférieure à 768px), c'est la 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 que j'ai trouvé une solution simple pour changer le point de rupture de l'effondrement, seulement par css.

j'espère que d'autres pourront le confirmer car je ne l'ai pas testé en profondeur et je ne suis pas sûr qu'il y ait des effets secondaires à cette solution.

vous devez changer les valeurs de requête de Médias 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 changer certains css définitions pour organiser le menu correctement pour toutes les tailles d'écran.

Espérons que cette aide.