Bootstrap 切换导航栏显示链接较低

Question

在我的响应式网页上，我实现了一个横幅，位于导航栏上方。问题是 - 当我减小页面大小以查看其响应式设计和切换显示时，当我选择切换按钮时，我的导航现在显示与顶部的横幅重叠。 Is there a way of implementing that when the toggle button is selected that the navigation list is shown further down - i.e 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 引导程序中，导航栏折叠的最小样式表是必需的：即 padding-top:20px;