时间戳

首页 > 解决方案 > 为什么我的按钮没有跳到 Bootstrap 4 中的预期部分？

html - 为什么我的按钮没有跳到 Bootstrap 4 中的预期部分？

问题描述

我有一个关于使用 scrollspy、在导航栏中添加一个按钮以及让该按钮跳转到其预期目标部分的问题。我添加了一个更语义化的标签，并使用带有 form-inline 类的 a 将其放在导航栏链接旁边。导航链接工作正常，但按钮没有。

我正在尝试不同的方法将 href 添加到按钮标签，或者用标签替换标签并删除标签，但没有任何效果。我试图找到一个使用该标签的卷轴间谍，但没有运气。这是我的代码：

<body data-spy="scroll" data-target="#navbar">
 <nav class="navbar fixed-top navbar-expand-md navbar-dark" id="navbar">
   <a class="navbar-brand" href="index.html" id="navbarBrand">Unexpected Friends</a>
   <!--navbar toggler is the hamburger icon that appears when in smaller screens-->
   <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <div id="navbarNav" class="collapse navbar-collapse">
     <!--ml-auto moves the links to the right-->
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#ourStory">Our Story<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#gallery">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#blog">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
        <form class="form-inline" id="button">
          <button type="button" class="btn btn-outline-light" role="button" id="waysToHelp" href="#waysToHelp">Ways to Help</button>
        </form>
      </ul>
   </div><!--navbarNav-->

 </nav>

<section id="waysToHelp">
       <div class="container-fluid">
          <div class="row">
              <div class="col-md-12">
                  <img src="img/uf_10.jpg" class="img-fluid float-right ml-4">
                  <h1 class="text-center">Ways To Help</h1>
                  <p>Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Lacinia quis vel eros donec ac. Arcu cursus vitae congue mauris rhoncus aenean vel elit scelerisque. Faucibus turpis in eu mi bibendum. Massa ultricies mi quis hendrerit. Bibendum ut tristique et egestas quis. Nisi vitae suscipit tellus mauris a. Lobortis feugiat vivamus at augue eget. Placerat vestibulum lectus mauris ultrices eros in cursus turpis massa. Pellentesque elit ullamcorper dignissim cras. Pellentesque sit amet porttitor eget dolor morbi non arcu risus. Tellus id interdum velit laoreet id donec ultrices tincidunt. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce. Adipiscing diam donec adipiscing tristique risus. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Dictum sit amet justo donec enim diam. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Ultricies tristique nulla aliquet enim.<br><br>
                  Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Risus in hendrerit gravida rutrum quisque. Tristique et egestas quis ipsum suspendisse ultrices gravida dictum. Ipsum consequat nisl vel pretium lectus quam id. Ut sem viverra aliquet eget sit amet. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Semper quis lectus nulla at volutpat diam ut. Risus at ultrices mi tempus. Eu feugiat pretium nibh ipsum consequat nisl. Eu scelerisque felis imperdiet proin fermentum. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Sit amet mauris commodo quis imperdiet massa. Urna porttitor rhoncus dolor purus. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit.</p>
              </div><!--column-->
          </div><!--row-->
       </div><!--container-->
     </section>
</body>

标签： htmlbootstrap-4

解决方案

请正确阅读文档：该data-spy属性将位于导航之外的 div 上，并带有一个data-target表示所选导航的

a由于href ，它必须是标签。它转换哈希url，直接在url中输入也可以访问。这是它如何工作的基本原理。

你可以这样做 -

<button type="button" class="btn btn-outline-light" role="button"
id="waysToHelp"><a  href="#waysToHelp">ways to help</a></button>



<ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#ourStory">Our Story<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#gallery">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#blog">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#waysToHelp">ways to help</a>
        </li>
        <form class="form-inline" id="button">
          <button type="button" class="btn btn-outline-light" role="button" id="waysToHelp"><a  href="#waysToHelp">ways to help</a></button>
        </form>
      </ul>

示例 - https://jsfiddle.net/cvwrfau0/

推荐阅读