DEMO

Question

我试图做一个模仿iOS上导航视图的水平条，那就是：

Back Logo SomeButton

左中右

在摆弄了许多解决方案之后，我已经能够使用

获得类似的东西了

<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，所以

在width:100%标记

中设置navbar-header

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

具有三个元素的Twitter-Bootstrap导航标题（iOS风格）

1 个答案:

DEMO