如何在导航栏中垂直定位项目答案

【问题标题】：how to position items vertically in navbar如何在导航栏中垂直定位项目
【发布时间】：2015-02-27 03:20:14
【问题描述】：

在我的基于引导的 ASP.NET 应用程序中，我需要在导航栏的右侧显示导航链接（主页、关于等）。我还需要在导航链接下方有一个搜索按钮。该按钮必须与最右侧的导航链接右对齐。这是我尝试过的代码：

       <div class="navbar-collapse collapse navbar-right">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>

            <div class="col-sm-3 col-md-3 navbar-right">
                <form class="navbar-form" role="search" method="get" action="~/Home/Search">

                    <div class="input-group ">
                        <input type="text" class="form-control" placeholder="Search" id="term" name="term" />
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

但是，搜索按钮仍与导航链接显示在同一行。

如何让项目在导航栏中垂直右对齐？问候。

【问题讨论】：

标签： asp.net twitter-bootstrap

【解决方案1】：

只需将表单包装在一个新容器中，请参阅 this demo（另外，我对结构进行了编辑以更正它）：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>


    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <div class="navbar-collapse collapse">
      <form class="navbar-form navbar-right" role="search" method="get" action="~/Home/Search">
        <div class="input-group ">
          <input type="text" class="form-control" placeholder="Search" id="term" name="term">
          <div class="input-group-btn">
            <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

【讨论】：