Bootstrap Navbar不崩溃（防止）

Question

我试图根据自己的需要使用引导程序来创建导航栏，但偶然发现了一个问题。

我希望当窗口缩小时，左边的前两个链接（首页和菜单字形）不会折叠。 其余的将崩溃。

屏幕快照链接在此处输入链接描述

这是我的代码

<template name="header">
  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <ul class="nav navbar-nav">
          <li><a class="navbar-nav" href="{{pathFor 'home'}}"><span class="glyphicon glyphicon-home"></span></a></li>  
          <li><a class="navbar-nav" id="showMenu" href="#"><span class="glyphicon glyphicon-align-left"></span></a></li>  
        </ul>
      </div>




      <div class="collapse navbar-collapse" id="navigation">
        <ul class="nav navbar-nav">
          <li class="{{activeRouteClass 'home' 'newPosts'}}">
            <a href="{{pathFor 'newPosts'}}">New</a>
          </li>
          <li class="{{activeRouteClass  'bestPosts'}}">
            <a href="{{pathFor 'bestPosts'}}">Best</a>
          </li>

          {{#if currentUser}}
            <li class="{{activeRouteClass 'postSubmit'}}">
              <a href="{{pathFor 'postSubmit'}}">Submit Post</a>
            </li>
            <li class="dropdown">
              {{> notifications}}
            </li>
          {{/if}}
        </ul>
        <ul class="nav navbar-nav navbar-right">
         {{> loginButtons}}
        </ul>
      </div>
    </div>
  </nav>
</template>

Answer 1

将它们移动到没有nav navbar-nav类的单独的<ul>对象中，以禁用此行为。