問題與導航欄

導航欄元素的垂直取向我有與引導創建，如下所示一個非常簡單的導航欄。我遇到的問題是左邊的3個項目很好地對齊（水平：左和垂直：中心）。但是，由於某些原因，右對齊的項目會粘貼到導航欄的頂部。值得讚賞的是我如何讓他們垂直對齊中心的任何提示。問題與導航欄

@using (Html.BeginForm("SearchName", "Home", FormMethod.Post)) 
{ 
    <div class="container"> 
     <nav class="navbar navbar-default navbar-inverse"> 
      <div class="container-fluid"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/" class="glyphicon glyphicon-book"></a></li> 
        <li><a href="/">Home</a></li> 
        <li><a href="/Home/ContactUs">Contact us</a></li> 
       </ul> 
       <ul class="nav navbar-nav navbar-right"> 
        <li id="custom-search-input"> 
         <input type="text" id="SearchTerm" name="SearchTerm" class="form-control input-sm" placeholder="Search by Name/Profession" /> 
        </li> 
        <li> 
         <span class="input-group-btn"> 
          <button class="btn btn-info btn-sm" type="submit"> 
           <i class="glyphicon glyphicon-search"></i> 
          </button> 
         </span> 
        </li> 
       </ul> 
      </div> 
     </nav> 
    </div> 
}

來源

2016-11-21 houman_ag

簡單的解決方法是刪除整個事情，包括內部標記：

<ul class="nav navbar-nav navbar-right">

，取而代之的是：

<form class="navbar-form navbar-right" role="search"> 
     <div class="form-group"> 
      <input type="text" id="SearchTerm" name="SearchTerm" class="form-control input-sm" placeholder="Search by Name/Profession" /> 
     </div> 

     <button type="submit" class="btn btn-default">Search</button> 
</form>

來源

2016-11-21 01:16:04 claudios

我不得不更換標籤「形式」與「UL」，但一旦我這樣做，它就像一個魔術。非常感謝claudios！ –

非常高興幫助@houman_ag :) – claudios

使用邊距CSS規則元素ul.nav.navbar-nav.navbar右。相應地進行調整，直到與您希望查看網站的所有瀏覽器的容器左側的菜單最佳對齊。

來源

2016-11-21 01:14:15

問題與導航欄

回答

相關問題