Bootstrap 4 Scrollspy水平位置不正确_Bootstrap 4_Scrollspy

Bootstrap 4 Scrollspy水平位置不正确

bootstrap-4

Bootstrap 4 Scrollspy水平位置不正确,bootstrap-4,scrollspy,Bootstrap 4,Scrollspy,我正在使用Bootstrap4，并用Scrollspy创建了一个导航栏。当我点击任何导航栏链接时，它会超出正确的水平位置。我尝试使用数据偏移量，但没有任何变化。除此之外，它工作正常。我一直在寻找解决办法，但没有成功 <body data-spy="scroll" data-target=".navbar" style="position: relative">

我正在使用Bootstrap4，并用Scrollspy创建了一个导航栏。当我点击任何导航栏链接时，它会超出正确的水平位置。我尝试使用数据偏移量，但没有任何变化。除此之外，它工作正常。我一直在寻找解决办法，但没有成功

<body data-spy="scroll" data-target=".navbar" style="position: relative">
<!-- -------------------NAVBAR--------------------- -->

<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark" >
  <div class="container">  
    <a class="navbar-brand" href="#" >Logo???</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse navbar" id="navbarNav">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav_item">
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav_item">
          <a class="nav-link" href="#els">Event Listeners</a>
        </li>
        <li class="nav_item">
          <a class="nav-link" href="#rcs">Random Color Selectors</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Color Theories</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#rgb">RGB</a>
            <a class="dropdown-item" href="#hsb">HSB</a>
            <a class="dropdown-item" href="#hex">HEX</a>
            <a class="dropdown-item" href="#muns">Munsell</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#cspec">Color Spectrum</a>
        </li>
        <li class="nav_item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav_item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul> 
    </div>
  </div>
</nav>

使用以下方法：












家：什么是Lorem Ipsum？
Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是
自16世纪以来，行业标准的虚拟文本，当时一个不知名的打印机在厨房里进行打印和打印
把它拼凑成一本样本书。它不仅经历了五个世纪，而且还经历了一次飞跃
进入
电子排版，基本保持不变。它在20世纪60年代随着
释放
包含Lorem Ipsum段落的Letraset表单，最近使用的是桌面发布软件，如
Aldus PageMaker，包括Lorem Ipsum版本。

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是
自16世纪以来，行业标准的虚拟文本，当时一个不知名的打印机在厨房里进行打印和打印
把它拼凑成一本样本书。它不仅经历了五个世纪，而且还经历了一次飞跃
进入
电子排版，基本保持不变。它在20世纪60年代随着
释放
包含Lorem Ipsum段落的Letraset表单，最近使用的是桌面发布软件，如
Aldus PageMaker，包括Lorem Ipsum版本。

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是
自16世纪以来，行业标准的虚拟文本，当时一个不知名的打印机在厨房里进行打印和打印
把它拼凑成一本样本书。它不仅经历了五个世纪，而且还经历了一次飞跃
进入
电子排版，基本保持不变。它在20世纪60年代随着
释放
包含Lorem Ipsum段落的Letraset表单，最近使用的是桌面发布软件，如
Aldus PageMaker，包括Lorem Ipsum版本。

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是
自16世纪以来，行业标准的虚拟文本，当时一个不知名的打印机在厨房里进行打印和打印
把它拼凑成一本样本书。它不仅经历了五个世纪，而且还经历了一次飞跃
进入
电子排版，基本保持不变。它在20世纪60年代随着
释放
包含Lorem Ipsum段落的Letraset表单，最近使用的是桌面发布软件，如
Aldus PageMaker，包括Lorem Ipsum版本。

Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是
自16世纪以来，行业标准的虚拟文本，当时一个不知名的打印机在厨房里进行打印和打印
把它拼凑成一本样本书。它不仅经历了五个世纪，而且还经历了一次飞跃
进入
电子排版，基本保持不变。它在20世纪60年代随着
释放
包含Lorem Ipsum段落的Letraset表单，最近使用的是桌面发布软件，如
Aldus PageMaker，包括Lorem Ipsum版本。

ELS：什么是Lorem Ipsum？
Lorem Ipsum只是印刷和排版行业的虚拟文本。Lorem Ipsum一直是
自16世纪以来，行业标准的虚拟文本，当时一个不知名的打印机在厨房里进行打印和打印
把它拼凑成一本样本书。它不仅经历了五个世纪，而且还经历了一次飞跃
进入
电子排版，基本保持不变。它在20世纪60年代随着
释放
包含Lorem Ipsum段落的Letraset表单，最近使用的是桌面发布软件，如
Aldus PageMaker，包括Lorem Ipsum版本。

Lorem Ipsum只是打印和排版的虚拟文本