Bootstrap 3 Navbar Collapse

Question

Est-il possible d'augmenter le point à partir duquel le bootstrap 3 barre de navigation s'effondre (c'est à dire pour qu'il s'effondre dans une liste déroulante sur le portrait comprimés)?

Ces deux-là étaient applicables pour l'amorçage de 2, mais pas maintenant!

Comment faire pour modifier barre de navigation de l'effondrement de seuil en utilisant Twitter bootstrap-responsive?

Bootstrap: modifier la valeur par défaut sensible barre de navigation de point d'arrêt

Answer 1

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

Voici une solution CSS simplifiée pour activer le repli sur la taille de sm:

 @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;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}
 

Changez simplement 991px par 1199px pour md tailles.

Answer 2

La grande différence entre Bootstrap 2 et Bootstrap 3 est le 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 "effondré" par défaut et "se développe" lorsqu'il atteint une certaine taille minimale.

Bootstrap 3 du site a en fait une "astuce" pour quoi faire: http://getbootstrap.com/components/#navbar

Personnaliser le point de s'effondrer

En fonction du contenu dans votre barre de navigation, vous pourriez avoir besoin de changer le point où votre barre de navigation bascule entre effondré et en mode horizontal. Personnaliser l' @grille-float-point d'arrêt de la variable ou ajouter votre propre requête de média.

Si vous allez à re-compiler votre MOINS, vous trouverez les MOINS variables dans l' variables.less le fichier. 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'effondrement d'un peu plus de temps, vous pouvez l'ajuster comme tel:

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

ou de développer plus tôt

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

Si vous voulez avoir l'étendre plus tard, et de ne pas traiter avec les re-compiler le MOINS, vous devrez remplacer les styles appliquées à l' 768px des requêtes de média et de l'avoir de retour à la valeur précédente. Puis rajoutez-les au moment opportun.

Je ne suis pas sûr si il ya une meilleure façon de le faire. Recompiler le Bootstrap MOINS à vos besoins est la meilleure (la plus simple). Sinon, vous devrez trouver tous les CSS media queries qui affectent votre barre de navigation, les écraser à des styles par défaut @ la 768px de la largeur, puis revenir en arrière à une hausse des min-width.

Recompiler le MOINS de faire tout de la magie pour vous simplement en changeant la variable. Ce qui est assez bien le point de LESS/SASS pré-compilateurs. =)

(remarque, je ne regarde tous vers le haut, il est d'environ 100 lignes de code, ce qui est l'embêter assez pour moi d'abandonner l'idée et viens de re-compiler Bootstrap pour un projet donné et éviter de gâcher quelque chose par accident)

J'espère que ça aide!

Cheers!

Answer 3

Le moyen le plus simple est de personnaliser le bootstrap

trouver une variable:

  @grid-float-breakpoint
 

qui est défini sur @ screen-sm, vous pouvez le modifier en fonction de vos besoins. J'espère que cela aide!

Answer 4

ceux-ci sont contrôlées dans des variables, pas besoin de muck autour de la source. avec bootstrap, essayez de variables d'abord, puis le remplace. puis revenir en arrière et essayer de variables à nouveau ;)

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

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";

ça y est! ces variables de référence page est super pratique: https://github.com/twbs/bootstrap/blob/master/less/variables.less

Answer 5

Je voulais upvote et commentaire sur jmbertucci réponse, mais je ne suis pas encore à faire confiance aux contrôles. J'ai eu le même problème et l'a résolu, comme il le dit. Si vous êtes en utilisant Bootstrap 3.0, de modifier le MOINS de variables dans des variables.moins de La réactivité des points de rupture sont mis 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);

Ensuite, réglez l'effondrement de la valeur pour la barre de navigation à l'aide de l' @grille-float-point d'arrêt de la variable à la ligne 232. Par défaut il est réglé sur @l'écran de la tablette . Si vous le souhaitez, vous pouvez utiliser une valeur de pixel, mais je préfère l'utiliser le MOINS de variables.