有沒有辦法改變Bootstrap導航欄高度？

Question

我正在使用Twitter的Bootstrap設計一個網站，而且我在使用響應式導航欄時遇到了困難。在引導程序中，導航欄允許移動用戶單擊圖標以擴展導航欄並顯示導航鏈接。我無法找到如何調整最大高度......當我嘗試使用其中一個下拉條時，導航欄不會相應地更改大小，並且用戶無法看到任何鏈接。

感謝您提供的任何幫助。

-A

編輯：這裏是我使用的導航欄（HTML）的CSS，我正在使用的代碼是標準bootstrap.css和bootrstrap-responsive.css：

<div class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="navbar-inner"> 
       <div class="container"> 
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="brand" href="http://example.com">organization</a> 
        <div class="nav-collapse collapse"> 
         <ul class="nav"> 
          <li><a href="index.html">Home</a></li> 
          <li class="active"><a href="contact.html">Contact</a></li> 
          <li><a href="nowplaying.html">Now Playing</a></li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Public Resources <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li><a href="public.html#observatory">Observatory</a></li> 
            <li><a href="public.html#planetarium">Planetarium</a></li> 
            <li class="divider"></li> 
            <li class="nav-header">For Teachers and Schools</li> 
            <li><a href="schools.html#programs">Programs</a></li> 
            <li><a href="schools.html#events">Host an Event</a></li> 
            <li><a href="schools.html#education">Educational Initiatives</a></li> 
           </ul> 
          </li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Undergraduate Resources <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li><a href="students.html#observatory">Observatory</a></li> 
            <li><a href="students.html#planetarium">Planetarium</a></li> 
            <li class="divider"></li> 
            <li class="nav-header">Physics</li> 
            <li><a href="xxx.com">Physics Homepage</a></li> 
            <li><a href="xxx.com">Physics and Astronomy</a></li> 
           </ul> 
          </li> 
          <li><a href="volunteer.html">Volunteer</a></li> 
          <li><a href="faq.html">FAQ</a></li> 
         </ul> 
        </div><!--/.nav-collapse --> 
       </div> 
      </div> 
     </div> 

Answer 1

好的，我固定在第一部分（具有當我想未調整大小的報頭）的方式是通過在自舉-responsive.css改變最小寬度值，如下所示：

@media (min-width: 1200px) { 
.nav-collapse.collapse { 
height: auto !important; 
overflow: visible !important; 
}  
} 

其中1200px從980改爲1200. Tricky棘手的...爲記錄，它是在線1104.

Answer 2

默認的導航欄HTML代碼如下：

<div class="navbar"> 
    <div class="navbar-inner"> 
    <a class="brand" href="#">Title</a> 
    <ul class="nav"> 
     <li class="active"><a href="#">Home</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
    </ul> 
    </div> 
</div> 

如果你檢查導航欄元素，你會發現裏面DIV（導航欄-內）具有類：

.navbar-inner { 
    min-height: 40px; 
} 

您可以刪除此值，並發現導航欄保持相同的高度，這是正常的，因爲導航欄的高度設置爲「自動」。因此，如果您刪除了min-height，高度將取決於鏈接標記填充，內部還有<ul></ul>和<a class="brand"></a>填充。

.navbar .nav > li > a { 
    float: none; 
    **padding: 10px 15px 10px;** 
    color: #777; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #FFF; 
} 

.navbar .brand { 
    display: block; 
    float: left; 
    **padding: 10px 20px 10px;** 
    margin-left: -20px; 
    font-size: 20px; 
    font-weight: 200; 
    color: #777; 
    text-shadow: 0 1px 0 #FFF; 
} 

如果更改它，您會發現「navbar」父項的高度會自動更改。你也可以維護min-height屬性，並改變它的值，調整上面提到的元素的填充。

對於響應零件，您可以在要編輯的分辨率的特定媒體查詢內編輯bootstrap-responsive.css中的所有樣式。

編輯：剛剛看到了你的HTML，檢查你的鏈接標籤在導航欄內的填充，減少它，也改變了.navbar-innermin-height，並使用值。