时间戳

首页 > 解决方案 > 链接到 bootstrap 4 modal nav 的部分

html - 链接到 bootstrap 4 modal nav 的部分

问题描述

我正在为我的移动全屏导航栏使用引导模式，导航栏中的链接链接到页面的各个部分，但是当单击模式中的链接时，不会发生滚动。

我尝试将 href 切换到index.html#home而不是#home没有成功。

这是我的模态：

<div
  class="modal fade fullscreen"
  id="menuModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button
          type="button"
          class="close btn btn-link"
          data-dismiss="modal"
          aria-hidden="true">
          <i class="fa fa-close fa-lg"></i>
        </button>
        <h4 class="modal-title text-center">
          <span class="sr-only">main navigation</span>
        </h4>
      </div>
      <div class="modal-body text-center">
        <ul>
          <li>
            <a href="#home" data-dismiss="modal">Home</a>
          </li>
          <li>
            <a href="#about" data-dismiss="modal">About</a>
          </li>
          <li>
            <a href="#contact" data-dismiss="modal">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

我希望导航栏中的链接平滑滚动到页面的所需部分。我在Codepen上做了一个例子

标签： htmlcssbootstrap-4

解决方案

推荐阅读