Bootstrap切换Navbar显示链接较低

Question

在我的响应网页上，我已经实现了一个横幅，可以坐在纳维栏上方。问题是 - 当我减少页面的大小以查看其响应式设计和切换显示时，当我选择"切换"按钮时，我的导航现在正在显示顶部的横幅重叠。是否有一种实现方法，当选择"切换"按钮以进一步显示导航列表时 - 即20px？

我在我的索引页面中包含了代码 - 实现了顶部横幅和导航：

     <nav class="navbar navbar-default navbar-static-top" role="navigation" id="topnavbar">
<div class="top">
<div class="social">
    <ul><li><a href="#"><i class="fa fa-md fa-facebook"></i></a></li>
     <li><a href="#"><i class="fa fa-md fa-twitter"></i></a></li>
     <li><a href="#"><i class="fa fa-md fa-instagram"></i></a></li>
</ul>   
</div>
</div>
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        <span class="icon-bar"></span>
          </button>
              <div id="navbar" class="navbar-collapse collapse">
                 <form class="navbar-form navbar-left">
                <div class="logo">
                    <a href="index.php">
                        <img src="style/images/logo_2.png" alt="Supplement Squad logo">
                    </a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#">page1</a></li>
                    <li><a href="#">page2</a></li>
                    <li><a href="#">page3</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>             
                        <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>   
                    </li>
                </ul>              
                        <div class="form-group">
                            <input type="text" placeholder="Search" class="form-control">
                        <button  class="btn btn-info btn-md" type="submit">
                            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        </button>
                    </form>
                </div>
                <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                </ul>
             </div><!--/.navbar-collapse -->
      </div>
    </nav>

我已经在试用和错误中尝试改变了任何纳维栏倒塌选项，以将上下推向上下。但是没有结果。任何建议都将不胜感激。

Answer 1

在CSS bootstrap中，最小样式表需要Navbar-Collapse的其他详细信息：即padding-top：20px;