2014-09-21 100 views
0

我有一个导航栏,我想以搜索字段为中心,但我没有找到我应该使用哪个类。除了官方网站还有其他文档吗?我会列出所有课程的列表以及他们做什么,这是不可能的?Bootstrap导航栏中心项目

<nav class="navbar navbar-default" role="navigation"> 
     <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="#">PrivateChat</a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse"> 
       <form class="navbar-form navbar-left" role="search"> 
        <div class="form-group"> 
         <input type="text" class="form-control" placeholder="Search"> 
        </div> 
       </form> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pseudo <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Profil</a></li> 
          <li class="divider"></li> 
          <li><a href="#">Déconnexion</a></li> 
         </ul> 
        </li> 
       </ul> 
      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 

回答

4

这里是我的修订答案:

.navbar-center 
{ 
    position: absolute; 
    width: 100%; 
    text-align: center; 
    margin: auto; 
} 

而且

<form class="navbar-form navbar-center" role="search"> 

工作例如: http://www.bootply.com/XS8FA919dX

+0

它不会改变任何东西:( – X4V1 2014-09-21 13:27:53

+0

非常感谢你,它的工作就像一个魅力。 – X4V1 2014-09-23 21:18:07

+0

是的,但它不适用于collaps e – 2015-07-16 15:26:58