Question

我正在尝试使用bootstrap创建一个导航栏来满足我自己的需求，但偶然发现了一个问题。

我希望左侧的前两个链接（主页和菜单字形）在窗口缩小时不会崩溃。其余的会崩溃。

这是我的代码

<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

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

Bootstrap Navbar非崩溃（阻止）

1 个答案: