comment changer la largeur du menu déroulant responsive bootstrap

Question

J'utilise la barre de navigation responsive de bootstrap. Je veux changer la largeur qui change dans le menu déroulant le défaut de cette largeur est de 768px mais je veux le changer par rapport à ma largeur. Comment dois-je faire que je pense que je devrais faire cela avec jquery en utilisant $(windows).resize() événement. Voici un échantillon de bootstrap navbar:

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 

Answer 1

Je pense qu'il ya deux façons de le faire en utilisant la personnalisation. Le moyen le plus rapide pour personnaliser votre fichier bootstrap.css consiste peut-être à utiliser le Customizer au http://getbootstrap.com/customize/. Là, vous pouvez changer la valeur pour @ grid-float-breakpoint. J'ai testé avec la valeur 480px (la valeur d'origine était @ screen-sm, qui est le même que 768px) Après cela, cliquez sur le bouton "Compiler et télécharger" à la fin de la page Customizer. Cela va changer le point de rupture lorsque la barre de navigation s'effondre. Au fichier bootstrap.css, par exemple, la valeur suivante est changée de

@media (min-width: 768px) { 
    .navbar-collapse { 
    width: auto; 
    border-top: 0; 
    box-shadow: none; 
    } 

à celle-ci ci-dessous. Le paramètre @media précédent provient du téléchargement bootstrap.css par défaut sans personnalisation.

@media (min-width: 480px) { 
    .navbar-collapse { 
    width: auto; 
    border-top: 0; 
    -webkit-box-shadow: none; 
      box-shadow: none; 
    } 

La deuxième façon de modifier ces paramètres consiste à utiliser LESS et à compiler la même valeur à partir du code source. Si vous décidez de faire votre propre compilation, vous pouvez découvrir le fichier variable @grid-float-breakpoint au variables.less dans moins de répertoire de votre installation de bootstrap (Bootstrap_dir/less/variables.less). Plus d'info à Compiling CSS and JavaScript et au Bootstrap 3 Less Workflow Tutorial

Answer 2

Vous pouvez ajouter votre propre classe au menu déroulant et la largeur définie comme vous le souhaitez.

Answer 3

Essayez ceci:

.navbar-nav > li > .dropdown-menu { width: yourwidth }