html - Bootstrap 移动 header 对齐问题

Question

我想弄清楚一些我认为应该很简单但我似乎无法让它正常工作的东西。我有一个我正在尝试遵循的设计，但似乎无法使其正确对齐。

这就是我想要的样子。

我的问题是它不会像我想要的那样对齐任何东西。我经历了很多不同的方式，这是我最近的尝试，我想我会寻求一些前端帮助。主页按钮只是一个链接。在下面的示例中，搜索按钮将打开一个搜索字段尚未编码的 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>

任何帮助将不胜感激，因为我猜这对于更有经验的前端开发人员来说相当容易。

Answer 1

由于您使用的是 Bootstrap ，我添加了 Bootstrap 网格类并重新排列了主页按钮。

<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>

沃金示例 http://jsbin.com/quxawovude/1/edit?html,css,output