Bootstrap 3 个导航栏重叠

Question

我在我的网站中使用以下代码作为菜单 bootstrap 3,

<html>
  <head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </head>
  <body>
    <nav class="navbar navbar-default" style="background: rgba(255,255,255,0.5);">
      <div class="container-fluid">
      <div class="navbar-header pull-left">
      <a href="/" class="navbar-left" style="margin-top: 5px;">Title</a>      
      </div>
        <div class="navbar-header pull-right">
        <ul class="nav pull-left">

            <li class="dropdown pull-right">
              <a href="#" data-toggle="dropdown" style="margin-top: 5px;" class="dropdown-toggle btn btn-info"><i class="fas fa-spin text-warning fa-bolt"></i>വിഭാഗങ്ങൾ<b class="caret"></b></a>
              <ul class="dropdown-menu">
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>      
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li> 
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>         
              </ul>
            </li>
          </ul>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>

        <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">


          <ul class="nav navbar-nav pull-left">

              <li><a target="_blank" class="btn btn-primary" href="#">test1</a></li>
              <li><a target="_blank" href="#">test1</a></li>
              <li><a href="/users/sign_up">Sign up</a></li>
              <li><a href="/users/sign_in">Log in</a></li>

          </ul>
        </div>
      </div>
    </nav>
  </body>
</html>

Here是代码的demo。当我单击可折叠的三行时显示的内容与导航栏重叠。如何解决？我尝试更改填充和一些 pull-left 和 pull-right。但没有工作。你能指出我在代码中做的错误吗？

Answer 1

您可以在 bs-example-navbar-collapse-1

中添加一个 margin-top

#bs-example-navbar-collapse-1{
  margin-top:50px;
}

这是工作fiddleHere

Bootstrap 3 个导航栏重叠

Bootstrap 3 Navbar overlaps

css

twitter-bootstrap-3