Question

我正在使用Bootstrap构建一个示例网站3.在调整窗口大小时，导航栏下方的内容会重叠。我已经包含了所有deault bootstrap cdn文件。我是否需要在CSS文件中进行更改？

<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 ”后删除课程“ in ”，仅在您点击按钮时显示内容

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

1 个答案: