在移动视图中具有居中徽标的居中引导导航答案

【问题标题】：Centered Bootstrap Navigation with centered logo in mobile view在移动视图中具有居中徽标的居中引导导航
【发布时间】：2014-10-08 18:26:50
【问题描述】：

我有一个带有两个不同菜单的引导导航栏。一个居中，一个在右侧。徽标显示在左侧。

在移动视图中，两个菜单都是折叠的。这是唯一的方法，我可以让桌面视图按照我想要的方式工作。

但我真正想要的移动视图是左侧的折叠按钮、居中的徽标和右侧的第二个菜单。

有什么好的存档方法吗？

桌面视图： |标志 |菜单 1 |菜单 2 |

移动端视图： |菜单 1 折叠按钮 |标志 |菜单 2 |

这是我的实际代码：

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar-collapse">
            <span class="sr-only">Collapse</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="" class="navbar-brand" title=""><img src="LOGO" /></a>
    </div>

    <div class="collapse navbar-collapse" id="main-navbar-collapse">

        <ul class="nav navbar-nav">
            /// MENU 1 - Mobile view collapsed
        </ul>

        <ul class="nav navbar-nav navbar-right">
            /// MENU 2 - Mobile view right
        </ul>
    </div>

</div>
</nav>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

你可以尝试这样的事情，但它需要自定义 CSS 来实现折叠 navbar..

<nav class="navbar navbar-default">
  <div class="navbar-header">
      <a class="navbar-brand" href="#">Logo</a>
      <a class="navbar-toggle navbar-link pull-left" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </a>
  </div>
  <ul class="nav navbar-nav navbar-right pull-right">
    <li><a href="#">Menu2</a></li>
    <li><a href="#">Right</a></li>
  </ul>
  <div class="collapse navbar-collapse" id="collapsed-navigation">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Menu1</a></li>
        <li><a href="#">Left</a></li>
        <li><a href="#">Left</a></li>
      </ul>
  </div><!-- /.navbar-collapse -->
</nav>

工作演示：http://www.bootply.com/pOdynPWRbt

【讨论】：

【解决方案2】：

我不知道正确的方法，但我认为下面的解决方案应该可以工作

创建一个 div 并放置 |标志 |菜单 1 |在那个 div 中，让它向左浮动。

现在在移动媒体查询中，只需让徽标正确浮动，它就会解决您的问题

桌面视图：| |标志 |菜单 1 ||菜单 2 |

移动视图：||菜单 1 折叠按钮 |标志 ||菜单 2 |

【讨论】：