導航欄中的下拉菜單有不需要的空間

我有一個帶有下拉菜單的引導欄，如下所示。圖像中突出顯示了一個不需要的空白。這怎麼解決？另外，什麼是最好的引導方式來調整下拉列表中每個列表項的高度和外觀？導航欄中的下拉菜單有不需要的空間

的jsfiddle：https://jsfiddle.net/LijoCheeran/q567pn6b/1/

HTML

<div class="navbar navbar-inverse navbar-fixed-top ui-widget-header"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#" style="padding-top:0px; padding-bottom:2px;"> 
        <span> 
         <!--<img src="../../Images/test-48.ico" height="48" alt="">--> 
        </span> 
        <div id="divBrandNameText" class="cookieFontGoogle" style="display:inline-block;color:#FFFFFF; vertical-align:central;">Brand</div> 
       </a> 
      </div> 
      <div class="navbar-collapse collapse"> 


       <ul class="nav navbar-nav"> 
        <li> 
         <a href="/"><i class="glyphicon glyphicon-home" style="padding-right:3px;"></i>HOME</a> 
        </li> 

        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" style="padding-right:3px;"></span>ADMIN<span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="/Account/Register" id="registerLink">Register</a></li> 
          <li><a href="#">Deactivate</a></li> 
          <li><a href="#">Delete</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="/"><i class="glyphicon glyphicon-th-large" style="padding-right:3px;"></i>ABOUT US</a> 
        </li> 
       </ul> 


       <form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"> 
        <input name="__RequestVerificationToken" type="hidden" value="kr1aZLmir-Xd707LG45t6gYyoT6p31yghXGfqmNZDdLGbvnS6ra6jWQWbzVNxrH7P3CIo7tk71MjLuHSKEV8U1zXQQ48y5nBBt2297Hf5OPRo5RMl9FRFq_nZImd9lnLXiZW5XXLE1EyAwC72VMKhA2" />  <ul class="nav navbar-nav navbar-right"> 
         <li> 
          <a href="/" title="Manage">Hello Admin!</a> 
         </li> 


         <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li> 
        </ul> 
       </form> 
      </div> 
     </div> 
    </div> 

    <div class="container body-content" style="padding-top:25px;"> 

     Test 

    </div>

// Add slideDown animation to Bootstrap dropdown when expanding. 
     $('.dropdown').on('show.bs.dropdown', function() { 
      $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
     }); 

     // Add slideUp animation to Bootstrap dropdown when collapsing. 
     $('.dropdown').on('hide.bs.dropdown', function() { 
      $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
     });

CSS

.navbar { 
      background-color: #00A0F0; 
     } 

     .navbar-fixed-top { 
      border-bottom: 1px solid #0078A0; 
     } 

     .navbar-inverse .navbar-nav > li > a { 
      color: #FFFFFF; 
      font-weight: bold; 
     } 

      .navbar-inverse .navbar-nav > li > a:hover, 
      .navbar-inverse .navbar-nav > li > a:focus { 
       color: #737373; 
       font-weight: bold; 
      } 

     .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { 
      color: #FFFFFF; 
      background-color: #00A0F1; 
     } 

      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, 
      .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { 
       color: #FFFFFF; 
       font-weight: bold; 
      } 

     .navbar-inverse .navbar-nav > .open > a, 
     .navbar-inverse .navbar-nav > .open > a:hover, 
     .navbar-inverse .navbar-nav > .open > a:focus { 
      color: #FFFFFF; 
      font-weight: bold; 
      background-color: #00A0F1; 
     } 

     .cookieFontGoogle { 
      font: 200 50px/1.3 'Cookie', Helvetica, sans-serif; 
      color: #fff; 
      text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
     }

來源

2017-02-05 Lijo

你有你的類.dropdown菜單上的一些填充，以覆蓋它：

.dropdown-menu { 
    padding: 0; 
}

來源

2017-02-05 04:02:03

你可以使用下面的CSS。 bigFontNavbar被定義爲在品牌文本中使用大字體時增加導航欄高度。

.bigFontNavbar {min-height: 65px;} 
.bigFontNavbar .navbar-toggle {margin-top: 15px;} 
.bigFontNavbar .navbar-collapse {padding-top: 8px;} 

.dropdown-menu { background-color: #00A0F1 !important; border:none; } 

.navbar-nav .open .dropdown-menu { 
    border-bottom: 1px solid rgba(0,0,0,.15); 
} 
.navbar-nav .open .dropdown-menu > li > a {background: none !important;} 

.ui-widget-header { background-size: cover; } 

.dropdown-menu > li > a { padding: 5px 10px; }

as in this updated jsFiddle

請給予反饋，如果你想做些別的事情有關的菜單項外觀。

來源

2017-02-05 04:59:49

導航欄中的下拉菜單有不需要的空間

回答

相關問題