导航栏

Question

我有一个非常简单的导航栏，我使用bootstrap创建，如下所示。我遇到的问题是左边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>
}

Answer 1

简单的解决方法是删除整个内容，包括：

的内部标记

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

Answer 2

对元素ul.nav.navbar-nav.navbar-right使用margin-top CSS规则。相应地进行调整，直到它最好地与容器左侧的菜单对齐，以便在您希望浏览网站的所有浏览器上进行调整。