html - 具有三个元素的 Twitter-Bootstrap 导航标题(iOS 样式)

Question

我正在尝试做一个模仿 iOS 上导航 View 的水平条，也就是说:

Back Logo SomeButton

Left Center Right

在摆弄了许多解决方案之后，我已经能够得到类似的东西，使用

<nav class="navbar navbar-default" role="navigation">

 <a class="navbar-brand" href="#"><img src="static/img_nav/logo_white_trans.gif"> </a>
  <div class="navbar-header navbar-collapse">
    <ul class="nav navbar-nav pull-left">
        <li><a href="#"> &lt; Back</a></li>

    </ul>
    <ul class="nav navbar-nav pull-right">
      <li><a href="#">Button</a></li>
    </ul>
  </div>
</nav>

使用这个 CSS:

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

.navbar-brand img {
    height: 20px;
}

当我在手机上浏览时，一切都如我所料，但当我进入更大的屏幕时，左右按钮会聚在一起。

Left Right Center

有人知道为什么吗？

Answer 1

试试这个:

您遇到问题的原因是:

在 navbar-collapse 中，width 是 auto，所以

在 navbar-header 标签中设置 width:100%

 <div style="width:100%" class="navbar-header navbar-collapse">

DEMO