Question

第一次使用bootstrap 4制作网站。我认为我到处都是，并搜索了所有教程，但没有找到我问题的答案。我希望导航栏的背景仅在内容后面扩展，同时保持顶部栏（粘性）。任何帮助表示赞赏。

查看图片： blue cross part should dissapear. the orange bar represents the sticky bar i want to keep and the background to the right of the green line should be expanded

#nav-bar {
  position: sticky;
  top: 0;
  z-index: 10;
}

.navbar {
  background-image: linear-gradient(to right, #1f1f1f, #ef1740);
  padding: 0 !important;
}

.navbar-brand img {
  height: 20px;
  padding-left: 12px;
  margin-top: -10px;
}

.navbar a:hover {
  background-color: #1f1f1f;
}

.navbar-nav li {
  padding: 0 10px;
}

.navbar-nav li a {
  color: #F7F2EF !important;
  font-weight: 600;
  float: right;
  text-align: left;
}

.fa-bars {
  color: #F7F2EF;
  font-size: 20px !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
}

.navbar-toggler {
  border: none !important;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<section id="nav-bar">
  <nav class="navbar navbar-expand-md navbar-light fixed-top">
    <!-- added fixed-top for navbar collapse-->
    <a class="navbar-brand" href="#"><img src="img/atlologo.png"></a>
    <button class="navbar-toggler navbar-toggle" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars"></i>
        </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#top">HOME<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#external">Media</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#documentation">Archive</a>
        </li>
        <li class="nav-item">
          <a class="nav-link " href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
</section>

防止引导导航栏扩展整个宽度

0 个答案: