css - 如何使用 Angular 用户界面和 Bootstrap 将搜索表单放置在水平导航栏的中心

Question

我有一个导航栏，如下所示。搜索表单左对齐。我可以使用“向右拉”使其右对齐，但无法找到在水平导航栏中心采用搜索表单的方法。我应该怎么办？

导航栏代码

<nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" ng-init="navCollapsed = true" ng-click="navCollapsed = !navCollapsed">
                <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
            </button>
            <a href class="navbar-brand" ui-sref="index">test topbar</a>
        </div>
        <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
            <ul class="nav navbar-nav navbar-right">

                <li ><a ui-sref="account"><small> My Account </small></a></li>
                <li class="nav-divider"></li>
                <li ><a href ng-click="LogOut()" ><small>Logout </small> </a></li>
            </ul>
            <div class="col-sm-6 col-md-6">
                <form class="navbar-form" role="search">
                    <div class="form-group" style="display: inline;">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search" name="q">
                             <span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                        </div>
                    </div>
                </form>
            </div>          
        </div>      
    </nav>

Answer 1

只需将 text-align:center 应用到表单即可。

工作示例:

@media (min-width: 768px) {
  .navbar-form.navbar-center {
    float: none;
    text-align: center;
  }
  .navbar-form.navbar-center .input-group .form-control {
    min-width: 400px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a href class="navbar-brand" ui-sref="index">test topbar</a>

    </div>

    <div class="collapse navbar-collapse" id="navbar">

      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">
            <small> My Account </small>
          </a>
        </li>
        <li class="nav-divider"></li>
        <li>
          <a href="#">
            <small> Logout </small>
          </a>
        </li>
      </ul>

      <form class="navbar-form navbar-center" role="search">
        <div class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="q">
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
            </span>
          </div>
        </div>
      </form>

    </div>

  </div>
</nav>