如何增加導航欄下拉的寬度？

我正在使用引導程序，並嘗試將一個搜索表單放入導航欄下拉菜單中，但我發現該表單看起來被壓扁，因爲下拉列表的寬度太小。此外，表單元素不是我想要的。我該如何解決？我不熟悉CSS和網頁設計。請幫忙！如何增加導航欄下拉的寬度？

當前佈局：

current layout screenshot

我想要實現：

desired layout screenshot

<header class="navbar navbar-inverse navbar-fixed-top navbar-inverse" role="banner"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="index.html" class="navbar-brand">Brand</a> 
    </div> 
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="index.html">Home</a></li> 
     <li><a href="#">Browse</a></li> 
     </ul> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Locate <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <form class="navbar-form navbar-left" role="search"> 
       <div class="form-group"> 
       <button type="button" class="btn btn-default navbar-btn"><li class="icon-screenshot"></li></button> 
       <input type="text" class="form-control" placeholder="Address"> 
       </div> 
       <div class="btn-group"> 
       <button type="submit" class="btn btn-default">Search</button> 
       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Link</a></li> 
        <li><a href="#">Link</a></li> 
       </ul> 
       </div> 
      </form> 
      </ul> 
     </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">USER <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#"><i class="icon-pencil"></i> Link</a></li> 
      <li><a href="#"><i class="icon-upload"></i> Link</a></li> 
      <li class="divider"></li> 
      <li><a href="#"><i class="icon-signout"></i> Link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</header>

來源

2013-08-29 Matt

試試這個：

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

可以使得其寬度將根據其內容自動

來源

2013-08-29 08:52:19

謝謝，我補充說，寬度現在更大。如果我添加顯示：內嵌塊，但下拉菜單永久可見。沒問題，但我發現通過將表單項放置到具有class =「form-group」的單獨div中似乎可以讓它們很好地顯示。 – Matt

顯示：inline-block也在我的應用程序中永久顯示下拉菜單令人驚訝。我放棄它。 – Stephane

將它應用於.open類以防止懺悔。 –

可以增加「最小寬度」值在dropdown.less

或使一個新的線中的CSS添加display: inline-block

.dropdown-menu { min-width: 200px }

來源

2013-08-29 08:54:53 darthsoup

如何增加導航欄下拉的寬度？

回答

相關問題