Changer le point d'arrêt de l'effondrement de Bootstrap Navbar sans utiliser moins

StackOverflow https://stackoverflow.com/questions/19827605

Question

Actuellement, lorsque la largeur du navigateur tombe en dessous de 768px, la barre navale passe en mode effondré. Je veux changer cette largeur à 1000px, donc lorsque le navigateur est inférieur à 1000px, la barre navale passe en mode effondré. Je veux le faire sans utiliser moins, j'utilise le stylet pas moins.

Mon problème est le même que dans cette question: Bootstrap 3 Navbar s'effondrer

Mais toutes les réponses de ces questions expliquent comment le faire en changeant moins de variable. Je n'ai pas fait face à moins, j'utilise Stylus, donc je veux savoir comment cela peut être fait en utilisant Stylus ou une autre méthode.

Merci!

Était-ce utile?

La solution 2

Vous devez écrire un spécifique requête médiatique Pour cela, à partir de votre question, en dessous de 768px, le Navbar s'effondrera, alors appliquez-le au-dessus de 768px et inférieur à 1000px, juste comme ça:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

Cela masquera l'effondrement de la barre navale jusqu'à la survenue par défaut de l'unité bootstrap. Au fur et à mesure que la classe d'effondrement retourne, les actifs intérieurs à l'intérieur de l'effondrement de Navbar seront automatiquement cachés, comme sage, vous devez définir votre CSS comme vous le souhaitez.

Autres conseils

Mise à jour 2018

Bootstrap 4

La modification du point d'arrêt de Navbar est plus facile dans Bootstrap 4 en utilisant le navbar-expand-* Des classes:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

  • navbar-expand-sm = menu mobile sur les écrans XS <576px
  • navbar-expand-md = menu mobile sur les écrans SM <768px
  • navbar-expand-lg = menu mobile sur les écrans MD <992px
  • navbar-expand-xl = menu mobile sur les écrans LG <1200px
  • navbar-expand = Ne jamais utiliser le menu mobile
  • (no expand class) = Utilisez toujours le menu mobile

Si vous excluez navbar-expand-* Le menu mobile sera utilisé à all largeurs. Voici une démo des 6 états de Navbar: Bootstrap 4 Navbar Exemple

Vous pouvez également utiliser un point d'arrêt personnalisé (??? PX) en ajoutant un peu de CSS. Par exemple, voici 1300px ..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Personnalisé Point d'arrêt de Navbar
Bootstrap 4 Exemples de points d'arrêt Navbar

** bootstrap 3 **

Pour bootstrap 3.3.x, voici travail CSS pour remplacer le point d'arrêt Navbar. Changer 991px à la dimension pixel du point où vous voulez que la barre de navigation s'effondre ...

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

Exemple de travail pour 991px: http://www.bootply.com/j7xjuae5v6
Exemple de travail pour 1200px: https://www.codeply.com/go/vsyaolzfb4 (avec formulaire de recherche)

Remarque: ce qui précède fonctionne pour n'importe quoi plus de 768px. Si vous devez le changer en Moins de 768px la Exemple de moins de 768px est ici.

dans bootstrap3, modifiez cette variable @ Grid-Float-Breakpoint à celui dont vous avez besoin. La valeur par défaut est 768px

A finalement déterminé comment changer la largeur d'effondrement en jouant avec «@ grid-float-briklepoint» à http://getbootstrap.com/customalise/.

Accédez à la ligne 2923 dans bootstrap.css (également version min) et modifiez @media screen and (min-width: 768px) { à @media screen and (min-width: 1000px) {

Le code finira donc par être:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

Je viens de le faire avec succès en utilisant le code CSS suivant.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

Dans le bootstrap 3. code source, il y a une variable définie dans variables.less appelé @grid-float-breakpoint Ce qui a le commentaire utile suivant:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

L'assortiment @grid-float-breakpoint-max La valeur est définie sur ce moins 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

La solution:

Alors juste régler le @grid-float-breakpoint valeur à 1000px à la place et reconstruire bootstrap.less dans bootstrap.css:

par exemple

@grid-float-breakpoint: 1000px;

La façon SASS de changer les variables bootstrap est en fait documentée sur le amorce page github.

Redéfinissez simplement les variables avant @Import Bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

En plus de la réponse @skely, pour faire menus déroulants À l'intérieur du travail de Navbar, ajoutez également leurs classes à remplacer. Code final ci-dessous:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 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;
        }
    }

code de démonstration

Navbars peut utiliser .navbar-toggler, .navbar-collapse et .navbar-expand {-sm | -md | -lg | -xl} pour changer lorsque leur contenu s'effondre derrière un bouton. En combinaison avec d'autres services publics, vous pouvez facilement choisir quand afficher ou masquer des éléments particuliers.

Pour les barres de navigation qui ne s'effondrent jamais, ajoutez la classe .Navbar-Expand sur la barre de navigation. Pour les barres de navigation qui s'effondrent toujours, n'ajoutez aucune classe .Navbar-Expand.

Par exemple :

<nav class="navbar navbar-expand-lg"></nav>

Le menu mobile s'affiche en grand écran.

Référence :https://getbootstrap.com/docs/4.0/components/navbar/

Dans Bootstrap v4, la navigation peut être effondrée tôt ou tard en utilisant différentes classes CSS

par exemple:

  • navbar-toggableable-sm
  • navbar-toggleable-md
  • navbar-toggleable-lg

Avec le bouton pour la navigation:

  • caché
  • caché-md-up
  • caché-lg-up

Cela a fonctionné pour moi bootstrap3

@media (min-width: 768px) {
    .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;
      }
}

A pris un certain temps pour comprendre ces deux-là:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

Pour Bootstrap 3.3, c'est le seul code dont vous avez besoin:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Votre meilleur pari serait d'utiliser un port du processeur CSS que vous utilisez.

Je suis un grand fan de Sass donc j'utilise actuellement https://github.com/thomas-mcdonald/bootstrap-sass

On dirait qu'il y a une fourche pour le stylet ici: https://github.com/acquisio/bootstrap-stylus

Sinon, Rechercher et remplacer est votre meilleur ami dans la version CSS ...

Salut je pense que vous pouvez le faire en utilisant CSS comme celui-ci, vous pouvez changer le menu Bootstrap de point d'arrêt 

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

Ceci est le code de travail pour moi. (Également les liens Navbar Dropdown fonctionnent)

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .navbar-nav {
      float: none!important; 
  }
  .navbar-nav>li {
      float: none;
  } 
  .collapse.in{
      display:block !important;
  }
 .navbar-nav .open .dropdown-menu {
     position: static;
     float: none;
     width: auto;
     margin-top: 0;
     background-color: transparent;
     border: 0;
     -webkit-box-shadow: none;
     box-shadow: none;
  }
}

C'est ce qui m'a fait l'affaire:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

Dans Bootstrap 4, si vous voulez trop rouler lorsque Navbar-Expand- *, se développe et s'effondre et montre et masque le hamburger (navbar-toggler), vous devez trouver ce style / définition dans bootstrap.css et le redéfinir dans votre Propre CustomStyle.css (ou directement dans bootstrap.css si vous êtes si enclin).

Par exemple. Je voulais que le Navbar-Expand-LG s'effondre et affiche le Navbar-Toggler à 950px. Dans bootstrap.css je trouve:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

Et en dessous de ça ... 

@media (min-width:992px) { 
    ... lots of styling ...
}

J'ai copié les deux requêtes @media et les ai collées dans mon style.css, puis j'ai modifié la taille pour répondre à mes besoins. Je suis mon cas, je voulais qu'il s'effondre à 950px. Les requêtes @Media doivent être différentes de tailles (je suppose), donc j'ai réglé la largeur maximale du conteneur à 949.98px et j'ai utilisé le 950px pour l'autre requête @media et donc le code suivant a été annexé sur mon style.css. Ce n'était pas facile à démêler des solutions torsadées que j'ai trouvées sur StackOverflow et ailleurs. J'espère que cela t'aides.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

Ici mon code de travail en utilisant dans React with bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

Il est maintenant pris en charge sur bootstrap 4.4

navbar-expand-sm
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top