html - Bootstrap 的导航栏切换器使我的内容向下移动

Question

我的导航栏切换器(汉堡菜单)仅在小屏幕上显示。但是当它出现并单击它时，标题上的所有元素都会向下移动。 我不希望发生这种情况，我只想看到菜单，并且该菜单位于标题上方。

这是我当前的代码:

header {
    height: 100vh;
    box-shadow: inset 100vw 0 0 #00000066;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<header>
        <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6E7476">
            <a class="navbar-brand" href="#">Online TV</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
                <nav class="nav nav-tabs">
                    <a class="nav-item nav-link active" href="#">Active</a>
                    <a class="nav-item nav-link" href="#">Much </a>
                    <a class="nav-item nav-link" href="#">Link</a>
                </nav>
            </div>
          
        </nav>

        <div class="container-fluid main-text mt-sm-3 mt-lg-5 js-slidein block">
            <h4 class="display-4">The Best IPTV for Albanian users </h4>
        </div>
    </header>






<!-- AVOID THIS -->
<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.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
        </script>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

Answer 1

您可以应用内置在类中的 Bootstrap 。添加 position-absolute w-100 到 nav 和 position-relative 到 container-fluid

header {
  height: 100vh;
  box-shadow: inset 100vw 0 0 #00000066;
}

.position-relative {
  padding-top: 55px;
  z-index: -1
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<header>
  <nav class="navbar navbar-expand-lg navbar-light position-absolute w-100" style="background-color: #6E7476">
    <a class="navbar-brand" href="#">Online TV</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
      <nav class="nav nav-tabs">
        <a class="nav-item nav-link active" href="#">Active</a>
        <a class="nav-item nav-link" href="#">Much </a>
        <a class="nav-item nav-link" href="#">Link</a>
      </nav>
    </div>

  </nav>

  <div class="container-fluid main-text mt-sm-3 mt-lg-5 js-slidein block position-relative">
    <h4 class="display-4">The Best IPTV for Albanian users </h4>
  </div>
</header>

<!-- AVOID THIS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>