当有一些非折叠项目时，引导导航栏折叠问题。

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

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