导航栏中导航栏元素的垂直对齐问题答案

【问题标题】：Issue with vertical alignment of navbar elements in navbar导航栏中导航栏元素的垂直对齐问题
【发布时间】：2016-11-21 00:52:21
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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>

【讨论】：

我不得不将标签“form”替换为“ul”，但是一旦我这样做了，它就像魔术一样工作。非常感谢克劳迪斯！

【解决方案2】：

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

【讨论】：