web-dev-qa-db-fra.com

Modifier le point d'arrêt d'effondrement de la barre de navigation de démarrage sans utiliser LESS

Actuellement, lorsque la largeur du navigateur est inférieure à 768 pixels, la barre de navigation passe en mode réduit. Je veux changer cette largeur à 1000px afin que, lorsque le navigateur est inférieur à 1000px, la barre de navigation passe en mode réduit. Je veux faire cela 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 à ces questions expliquent comment le faire en modifiant la variable LESS. Je n'ai pas eu affaire à LESS, j'utilise un stylet, je veux donc savoir comment cela peut être fait avec un stylet ou une autre méthode. 

Merci! 

csstwitter-bootstrapresponsive-designnavbarcollapse
180
nearpoint

Vous devez écrire une requête media spécifique pour cela. Dans votre question, sous la barre des 768 pixels, la barre de navigation va s'effondrer.

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

Cela cachera la barre de navigation se replier jusqu'à l'occurrence par défaut de l'unité d'amorçage. Lorsque la classe collapse bascule, les ressources internes de la barre de navigation sont automatiquement masquées. De la même manière, vous devez définir vos CSS comme vous le souhaitez.

49
SaurabhLP

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 classes navbar-expand-*:

<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 du mobile
  • (no expand class) = toujours utiliser le menu mobile

Si vous excluez navbar-expand-*, le menu du mobile sera utilisé avec des largeurs all. Voici une démonstration des 6 états de la barre de navigation: Exemple de Bootstrap 4 Navbar

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 .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 Custom Point d'arrêt Navbar
Bootstrap 4 Exemples de points d'arrêt dans la barre de navigation

Bootstrap 3

Pour Bootstrap 3.3.x, voici le fonctionnel CSS permettant de remplacer le point d'arrêt de la barre de navigation. Remplacez 991px par la dimension en pixels du point auquel vous souhaitez que la barre de navigation se replie ...

@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 fonctionnement pour 1200px: https://www.codeply.com/go/VsYaOLzfb4 (avec formulaire de recherche)

Remarque: Ce qui précède fonctionne pour tout ce qui est plus de 768 pixels. Si vous devez le changer en moins de 768px, l'exemple de moins de 768px est ici .

339
Zim

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

44
fengd

Nous avons enfin trouvé un moyen de changer la largeur d’effondrement en jouant avec '@ grid-float-breakpoint' sur http://getbootstrap.com/customize/ .

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

Donc, le code finira 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;
  }
}
23
Stephen

Dans Bootstrap 3 .LESS code source , il existe une variable définie dans variables.less appelée @grid-float-breakpoint qui contient le commentaire utile suivant:

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

La valeur correspondante de @grid-float-breakpoint-max est définie sur la valeur moins 1px:

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

Solution:

Donc, définissez plutôt la valeur @grid-float-breakpoint sur 1000px et reconstruisez bootstrap.less en bootstrap.css:

par exemple.

@grid-float-breakpoint: 1000px;
12
Gone Coding

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
ruperto17

La façon dont Sass modifie les variables d’amorçage est en fait décrite dans la page bootstrap-sass github.

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

$grid-float-breakpoint: 1000px;

@import 'bootstrap';
10
tropicalfish

En plus de @Skely answer, pour que menus déroulants fonctionnent dans la barre de navigation, ajoutez également leurs classes pour qu'elles soient remplacées. 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

7
jacvalle

Dans bootstrap v4, la navigation peut être réduite tôt ou tard à l'aide de différentes classes css

par exemple:

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

Avec le bouton pour la navigation:

  • caché-sm-up
  • caché-md-up
  • caché-lg-up
4
Eddie Jaoude

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
VeeK

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 du temps pour comprendre ces deux choses:

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

Votre meilleur choix serait d’utiliser un port du processeur CSS que vous utilisez.

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

Il semble y avoir une fourchette pour Stylus ici: https://github.com/Acquisio/bootstrap-stylus

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

2
allaire

Bonjour, je pense que vous pouvez le faire en utilisant CSS comme ceci. 

    @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
Yasssine ELALAOUI

Dans bootstrap 4, si vous souhaitez ignorer quand navbar-expand- *, se développe et s’effondre, affiche et masque le hamburger (navbar-toggler), vous devez trouver ce style/cette définition dans le fichier bootstrap.css et le redéfinir dans votre propre customstyle.css (ou directement dans bootstrap.css si vous le souhaitez). 

Par exemple. Je voulais que navbar-expand-lg s’effondre et affiche le navbar-togglerat. 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 l'adapter à mes besoins. Je voulais que mon cas s’effondre à 950px. Les requêtes @media doivent nécessairement être de tailles différentes (je suppose), donc j'ai défini conteneur maximum-width sur 949.98px et utilisé les 950px pour l'autre requête @media. Le code suivant a donc été ajouté à mon style.css. Cela n'a pas été facile à dissocier 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%;
    }
}
0
Jack Mason

C'est ce qui a fait le tour 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
jeanverster

Voici 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>
0
webmastx