如何使数据内容在导航栏折叠引导程序3上不重叠？

Question

I am building a sample website using Bootstrap 3. On resizing the window , the Content below the navbar gets overlapped. I have included all the deault bootstrap cdn files. Do I need to make changes in CSS file?

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">

      <a class="navbar-brand"  href="temp.html"><span class="glyphicon glyphicon-home"></span></a>
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-controls="navbar-collapse-1" aria-expanded="false">

                <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 in" role="navigation" id="navbar-collapse-1" style="height:auto">

          <center><ul class="nav navbar-nav navbar-right">

                      <li class="list1">
                        <a href="#" class="list-1">About</a>
                      </li>

                      <li class="list1">
                        <a href="#">Study</a>
                      </li>

                      <li class="list1">
                        <a href="#">Quiz</a>
                      </li>

                      <li class="list1">
                        <a href="#">Resources</a>
                      </li> 


                  </ul>
          </center>
      </div>
    </div>
  </div>
</br></br></br>

  <div class="container-fluid heading-1"><br><br>
    <img src="data.png" class="image-1" ></img><h1><p>WELCOME</p>
    <br><br>

Answer 1

在类“ navbar-collapse ”之后删除“ 中的类”，仅在您单击按钮时显示内容