Question

我正在尝试使用Bootstrap在网页中实现一个菜单，其中包含一些在超小屏幕中没有折叠的项目。

我已经能够在实施它方面取得进展。当屏幕超小时，我想要不崩溃的项目正在按预期工作。但问题是当我点击导航栏切换按钮时，折叠的菜单只显示在屏幕的右侧，并且它不像通常那样在屏幕上显示。

如何解决此问题？

<nav role="navigation"   class="navbar navbar-inverse">
  <div class="container">

    <!-- Title -->
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">Projeto</a>
    </div>
    
    <!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
    <div class="navbar-header pull-right">
      <ul class="nav  navbar-nav pull-left">
        <li class="pull-left"><a href="contato.html"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></a> </li>
      </ul>
      
        <!-- Required bootstrap placeholder for the collapsed menu -->
      <button type="button" style="margin-left:20px;" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
    </div>
        
    
     <!-- The Collapsing items            navbar-left or navbar-right -->
    <div class="collapse navbar-collapse navbar-left">
      <ul class="nav navbar-nav pull-right">
        <li class="active"><a href="index.html">Inicio</a></li>
        <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">O Curso <span class="caret"></span></a>
              <ul class="dropdown-menu">
                  <li><a href="#">Sobre o Curso</a></li>
                  <li><a href="#">Disciplinas</a></li>
              </ul>
        </li>
        <li><a href="professores.html">Professores</a></li>
        <li><a href="laboratorios.html">Laboratórios</a></li>
      </ul>
    </div>
    
  </div>
</nav>

Answer 1

尝试将带有边距的navbar-fixed-top添加到折叠div的顶部。

存在一些非折叠项目时，Bootstrap导航栏折叠问题。

1 个答案: