Bootstrap移动头对齐问题

我想弄清楚一些我认为应该很简单但我似乎无法让它正常工作的东西。我有一个设计，我试图遵循，似乎无法让它正确对齐。Bootstrap移动头对齐问题

这就是我想要的样子。

我的问题是它不会像对准我想要的任何东西。我经历了很多不同的方式，这是我最近的尝试，我会请求一些前端帮助。主页按钮只是一个链接。搜索按钮将打开一个搜索字段未编码的div，例如下面。汉堡菜单将打开其他标题链接。

这里是我得到的，你可以看到它不是很接近。

http://jsbin.com/fucozulecu/edit?html,css,output

CSS

.navbar-nav { 
     float: none; 
     text-align: center; 
    } 

.navbar-nav li { 
    float: none; 
    display: inline-block; 
    width: 33%; 
    color: white; 
}

HTML

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="navbar-header"> 
     <ul class="nav navbar-nav"> 
      <li> 
       <a href="/"> 
        <button type="button" class="navbar-toggle btn-home visible-sm visible-xs"> 
         <span class="glyphicon glyphicon-home"></span> 
        </button> 
       </a> 
      </li> 
      <li> 
       <button type="button" class="navbar-toggle btn-search" data-toggle="collapse" 
         data-target=".navbar-search"> 
        <span class="glyphicon glyphicon-search"></span> 
       </button> 
      </li> 
      <li> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </li> 
     </ul> 
    </div> 
    <div class="collapse navbar-collapse navbar-menubuilder"> 
     <ul class="nav navbar-nav"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 
    <div class="collapse navbar-collapse navbar-search"> 
     <ul class="nav navbar-nav navbar-search"> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    <!-- /.navbar-collapse --> 

</nav>

任何帮助，因为我猜这是相当容易的多expereinced前端开发者可以理解的。

来源

2016-11-28 Chris

由于您使用引导，我添加了引导网格类并重新安排了主页按钮。

<ul class="nav navbar-nav row"> 
    <li class="col-xs-4"> 
      <button type="button" class="navbar-toggle btn-home visible-sm visible-xs"> 
         <a href="/" class="nav-btn"><span class="glyphicon glyphicon-home"></span> </a> 
      </button> 
    </li> 
    <li class="col-xs-4"> 
     <button type="button" class="navbar-toggle nav-btn" data-toggle="collapse" 
       data-target=".navbar-search"> 
      <span class="glyphicon glyphicon-search"></span> 
     </button> 
    </li> 
    <li class="col-xs-4"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </li> 
</ul>

Woking的例子http://jsbin.com/quxawovude/1/edit?html,css,output

来源

2016-11-29 04:36:26

非常感谢诺贝尔 – Chris

Bootstrap移动头对齐问题

回答

相关问题