Modifier le point d'arrêt de l'effondrement de la barre de navigation de bootstrap sans utiliser MOINS

Actuellement, lorsque la largeur du navigateur tombe en dessous de 768 pixels, la barre de navigation passe en mode réduit. Je veux changer cette largeur à 1000px, donc lorsque le navigateur est en dessous de 1000px, la barre de navigation passe en mode réduit. Je veux le faire sans utiliser MOINS, j'utilise un stylet pas MOINS.

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

Mais toutes les réponses dans ces questions expliquent comment le faire en changeant la variable LESS. Je n'ai pas eu affaire à MOINS, j'utilise un stylet, donc je veux savoir comment cela peut être fait en utilisant un stylet ou une autre méthode.

Merci!

Vous devez écrire une requête média spécifique pour cela, à partir de votre question, en dessous de 768px, la barre de navigation s'effondrera, alors appliquez-la au-dessus de 768px et en dessous de 1000px, juste comme ça:

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

Cela masquera l'effondrement de la barre de navigation jusqu'à l'occurrence par défaut de l'unité d'amorçage. Au fur et à mesure que la classe d'effondrement bascule, les actifs internes à l'intérieur de l'effondrement de la barre de navigation seront automatiquement masqués, comme vous devez définir votre CSS comme vous le souhaitez.

MISE À JOUR 2018

Bootstrap 4

Changer le point d'arrêt de la barre de navigation est plus facile dans Bootstrap 4 en utilisant les navbar-expand-*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 é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é à des alllargeurs. Voici une démo des 6 états de la barre de navigation : Bootstrap 4 Navbar Example

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

@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 Navbar Breakpoint personnalisé
Exemples Bootstrap 4 Navbar Breakpoint Exemples

Pour Bootstrap 3.3.x, voici le CSS de travail pour remplacer le point d'arrêt de la barre de navigation. Passez 991pxà la dimension en pixels du point auquel vous souhaitez 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 tout ce qui dépasse 768 pixels . Si vous devez le changer en moins de 768px, l' exemple de moins de 768px est ici .

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

Enfin travaillé sur la façon de changer la largeur de l'effondrement en jouant avec '@ grid-float-breakpoint' sur http://getbootstrap.com/customize/ .

Allez à la ligne 2923 dans bootstrap.css (également la version min) et passez @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 code source Bootstrap 3 .LESS , il existe une variable définie dans variables.lessappelée @grid-float-breakpointqui a le commentaire utile suivant:

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

La @grid-float-breakpoint-maxvaleur correspondante est définie sur 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 @grid-float-breakpointvaleur à 1000 pixels à la place et de reconstruire bootstrap.lessenbootstrap.css :

par exemple

@grid-float-breakpoint: 1000px;

La manière Sass de changer les variables de bootstrap est en fait documentée sur la page github de bootstrap-sass .

Redéfinissez simplement les variables avant de démarrer @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

En plus de la réponse @Skely, pour faire fonctionner les menus déroulants à l'intérieur de la barre de navigation, 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 démo

Dans bootstrap v4, la navigation peut être réduite tôt ou tard en utilisant différentes classes css

par exemple:

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

Avec le bouton de navigation:

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

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

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

Il a fallu un certain temps pour comprendre ces deux choses:

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

Le mieux 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

Il semble qu'il y ait une fourchette pour Stylus ici: https://github.com/Acquisio/bootstrap-stylus

Sinon, Search & Replace 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 d'amorçage 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;
    }
}

Les barres de navigation peuvent utiliser les classes .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 utilitaires, 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 sur grand écran.

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

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 souhaitez passer outre lorsque navbar-expand- *, se développe et se réduit et affiche 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 montre 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 en fonction de mes besoins. Je mon cas, je voulais qu'il s'effondre à 950px. Les requêtes @media doivent avoir des tailles différentes (je suppose), j'ai donc défini la largeur maximale du conteneur à 949.98px et utilisé le 950px pour l'autre requête @media et le code suivant a donc été ajouté à mon style.css. Ce n'était pas facile à démêler des solutions tordues 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%;
    }
}

Voici mon code de travail en utilisant dans 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>

Il est maintenant pris en charge sur Bootstrap 4.4

navbar-expand-sm