html - 防止折叠的导航栏将内容推送到下方

Question

我正在使用 bootstrap 4.1

我有以下结构:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>


<nav class="navbar navbar-expand-lg bg-transparent navbar-dark align-items-end ">
  <button class="navbar-toggler navbar-toggler-left" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse " id="collapsibleNavbar">
    <ul class="navbar-nav mr-auto ">
      <li class="nav-item">
        <a class="nav-link" href="#">News</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Documents</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>

    </ul>
    <ul class="navbar-nav ">
      <li class="nav-item ">
        <a class="nav-link" style="font-weight:300; display:inline-block" href="">RUS</a>
        <font style="font-weight:300" color="white">|</font><a style="font-weight:300;display:inline-block" class="nav-link" href="">ENG</a>
      </li>
    </ul>



  </div>

  <ul class="navbar-nav">
    <li class="nav-item ">
      <a class="nav-link" style="font-weight:300;" href=""><i class="fas fa-user fa-sx"></i>&nbsp;&nbsp;Login</a>
    </li>
  </ul>


</nav>


<div class="d-flex   flex-column" style="border:3px solid green;height:720px; ">
  Some content
</div>

在小屏幕上，我的导航栏折叠起来并且工作正常，但是当我点击“汉堡图标”时，.collapse 推送放在下面的内容。

有什么办法可以避免这种情况吗？我希望显示的 div 覆盖部分内容但不展开它。

我试过这个 advice ，但它似乎不适合导航栏。

请帮忙。

Answer 1

尝试将 fixed-top 类添加到您的 navbar 元素。它可能对您有所帮助。

文档页面 - https://getbootstrap.com/docs/4.1/components/navbar/#placement

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>