如何更改下拉菜單響應引導程序的寬度

我使用引導程序的響應式導航欄。我想改變下拉菜單的寬度，這個寬度的默認值是768px，但我想改變它的寬度。我應該怎麼做，我認爲我應該使用jQuery來做到這一點，使用$(windows).resize()事件。這裏是引導導航欄的示例：如何更改下拉菜單響應引導程序的寬度

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

來源

2014-07-26 Daniel.V

你不能只使用寬度：30px;/*你想要的寬度*/ – Richa

我認爲有通過使用定製這樣做有兩種方式。也許定製bootstrap.css文件的最快方法是使用定製器http://getbootstrap.com/customize/。在那裏，您可以更改@ grid-float-breakpoint的值。我測試的值爲480px（原始值爲@ screen-sm，與768px相同）然後單擊定製程序頁面末尾的「編譯和下載」按鈕。這會在導航欄崩潰時更改折點。例如，在bootstrap.css文件中，以下值從

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

更改爲下面的這個。以前的@media設置來自默認的bootstrap.css下載，無需自定義。

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

更改這些設置的第二種方法是使用LESS並從源代碼編譯相同的值。如果您決定編寫自己的編譯文件，則可以在引導源安裝的較少目錄（Bootstrap_dir/less/variables.less）處發現變量@grid-float-breakpoint位於variables.less文件。更多信息在Compiling CSS and JavaScript和Bootstrap 3 Less Workflow Tutorial

來源

2014-07-26 13:30:34 jyrkim

你可以如你所願自己的類添加到下拉菜單和設置寬度。

來源

2014-07-26 09:54:14

我想使用bootstarp導航欄，如果我想使用我自己的類爲什麼我應該問問題！ !!!! –

@ Daniel.V好吧，試着像logan Sarav一樣在下面建議您這樣做，但我建議您使用自定義類來更改寬度，因爲覆蓋現有樣式是不好的做法。如果你想做其他事情，只需更清楚地描述它，不要大喊大叫。 –

試試這個：

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

來源

2014-07-26 09:58:23

感謝您的回答，但這是行不通的!!!!! –

如何更改下拉菜單響應引導程序的寬度

回答

相關問題