Changer bootstrap navbar point de rupture de l'effondrement sans utiliser moins

actuellement, lorsque la largeur du navigateur tombe au-dessous de 768px, la barre de navigation passe en mode "collapsé". Je veux changer cette largeur à 1000px ainsi quand le navigateur est inférieur à 1000px le navbar change en mode effondré. Je veux le faire sans utiliser moins, j'utilise stylet pas moins.

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

mais toutes les réponses à ces questions expliquent comment le faire par changement moins variable. Je n'ai pas eu affaire à moins, j'utilise stylus donc je veux savoir comment cela peut être fait en utilisant stylus ou une autre méthode.

Merci!

168
demandé sur Community 2013-11-07 07:41:02

16 réponses

vous devez écrire un spécifique media query pour cela, à partir de votre question, en dessous de 768px, la barre de navigation va s'effondrer, alors appliquez-le au-dessus de 768px et en dessous de 1000px, juste comme cela: 

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

cela masquera l'effondrement de la barre de navigation jusqu'à l'apparition par défaut de l'unité bootstrap. Comme la classe de collapsus bascule les actifs intérieurs à l'intérieur de l'collapsus de navbar seront automatiquement cachés, comme wise vous devez régler votre css comme vous vouliez la conception.

47
répondu SaurabhLP 2016-04-04 15:55:27

2018 Mise à jour

Bootstrap 4

changer le point de rupture navbar est plus facile dans Bootstrap 4 en utilisant les classes navbar-expand-* :

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

  • navbar-expand-sm = menu mobile sur écran xs <576px
  • navbar-expand-md = menu mobile sur écran sm <768px
  • navbar-expand-lg = menu mobile sur les écrans md <992px
  • navbar-expand-xl = menu mobile sur écrans lg <1200px
  • navbar-expand = ne jamais utiliser le menu mobile
  • (no expand class) = toujours utiliser le menu mobile

si vous excluez navbar-expand-* le menu mobile sera utilisé à all largeurs. Voici une démo des 6 états navbar: Bootstrap 4 Navbar exemple

vous pouvez également utiliser un point de rupture 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 .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Personnalisé Navbar Point D'Arrêt

Bootstrap 4 Navbar Point D'Arrêt Exemples

Bootstrap 3

Pour Bootstrap 3.3.x, voici le fonctionnant CSS pour outrepasser le point de rupture navbar. Changez 991px en pixel de la dimension 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 le formulaire de recherche)

Remarque: Les travaux ci-dessus de tout", 1519150920" plus de 768px . Si vous devez le changer en moins de 768px le exemple de moins de 768px est ici .

307
répondu Zim 2018-02-26 17:22:11

dans bootstrap3 , changez cette variable @grid-float-breakpoint en celle dont vous avez besoin. La valeur par défaut est 768px

44
répondu fengd 2015-03-05 02:21:09

a finalement trouvé comment changer la largeur de l'effondrement en jouant avec "@grid-float-breakpoint" à http://getbootstrap.com/customize / .

passez à la ligne 2923 dans bootstrap.css (aussi Version min) et remplacer @media screen and (min-width: 768px) { par @media screen and (min-width: 1000px) {

donc le code sera: 

@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;
  }
}
23
répondu Stephen 2014-03-19 06:42:38

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

}
12
répondu ruperto17 2015-05-15 20:00:26

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

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

la valeur correspondante @grid-float-breakpoint-max est définie à celle moins 1px: 

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

Solution:

il suffit donc de définir la valeur @grid-float-breakpoint à 1000px à la place et de reconstruire bootstrap.less en bootstrap.css :

par exemple 

@grid-float-breakpoint: 1000px;
12
répondu Gone Coding 2015-08-03 13:35:34

la façon Sass de changer les variables bootstrap est en fait documentée sur la page bootstrap-sass GitHub.

il suffit de redéfinir les variables avant vous @import bootstrap: 

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
10
répondu tropicalfish 2016-07-05 06:51:27

en plus de @Skely answer, pour faire dropdown menus à l'intérieur du travail navbar, ajouter également leurs classes pour être overriden. 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;
        }
    }

le code de démonstration

6
répondu jacvalle 2016-05-27 05:25:25

dans bootstrap v4, la navigation peut s'effondrer tôt ou tard en utilisant différentes classes css

par exemple:

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

avec le bouton pour la navigation:

  • hidden-sm-up
  • hidden-md-up
  • caché-lg-up
4
répondu Eddie Jaoude 2017-10-02 19:30:16

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;
   }
}
3
répondu VeeK 2016-04-08 11:23:34

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 fourchette pour stylet ici: https://github.com/Acquisio/bootstrap-stylus

sinon, Search & Replace est votre meilleur ami dans la version css...

2
répondu allaire 2013-11-07 04:21:21

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;
}
1
répondu Khaled 2017-11-15 00:51:35

Salut je pense que vous pouvez le faire en utilisant CSS comme ceci vous pouvez modifier le menu "breakpoint bootstrap 

    @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;
    }
}
1
répondu Yasssine ELALAOUI 2018-01-26 11:19:26

C'est ce qui a fait l'affaire pour moi: 

@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;
}
0
répondu jeanverster 2016-06-03 07:25:09

dans bootstrap 4, Si vous voulez surfer quand navbar-expand -*, se dilate et s'effondre et montre et cache le hamburger (navbar-toggler) vous devez trouver ce style/définition dans bootstrap.css, et de redéfinir votre propre customstyle.css (ou directement dans bootstrap.css si vous êtes si incliné).

par exemple. Je voulais que le navbar-expand-lg s'effondre et montre le navbar-toggler à 950px. Dans le 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 inférieur que. .. 

@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 modifié la taille pour répondre à mes besoins. Je voulais qu'il s'effondre à 950px. Les requêtes @media doivent être de tailles différentes (je suppose), donc j'ai mis conteneur Max-width à 949,98 px et j'ai utilisé le 950px pour l'autre requête @media et donc le code suivant a été ajouté à mon style.CSS. Ce n'était pas facile à démêler des solutions tordues que j'ai trouvé sur Stackoverflow et ailleurs. Espérons que cette aide. 

@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%;
    }
}
0
répondu Jack Mason 2018-02-21 14:26:25

Voici mon code de travail en utilisant in React avec 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>
0
répondu webmastx 2018-03-17 07:10:58