Question

我需要帮助设置Bootstrap的Scrollspy。我遵循了文档中的指导原则并且没有工作。请帮我找到解决这个问题的方法

我在body元素中使用数据属性并将position设置为relative 这是我的HTML代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link href="https://fonts.googleapis.com/css?family=Fascinate+Inline|Anton|Raleway:200|Megrim" rel="stylesheet">

<style>
body {
  height: 100vh;
  background: url("https://image.ibb.co/i1Qu1R/Adobe_Stock_123146928.png") no-repeat fixed;
  background-size: cover;
  position: relative;
  top: 121px;
}
.active {
  color: black !important;
</style>

<nav id="main-nav" class="nav justify-content-end fixed-top">
  <!-- nav-fill nav-justified flex-column flex-md-row-->
  <a href="#" class="navbar-brand">marouane <span>rassili</span></a>
  <a href="#home" class="nav-link home active">
      <!-- flex-md-fill text-md-center"-->Home</a>
  <a href="#gallery" class="nav-link gallery">
      <!-- flex-md-fill text-md-center"-->Gallery</a>
  <a href="#about" class="nav-link about">
      <!-- flex-md-fill text-md-center"-->About</a>
  <a href="#contact" class="nav-link contact">
      <!-- flex-md-fill text-md-center"-->Contact</a>
</nav>


<body data-spy="scroll" data-target="#main-nav">
<section id="home">
  <div class="text-center">
    <h1>HOME</h1>
  </div>
</section>
<section id="gallery">
  <div class="text-center">
    <h1>GALLERY</h1>
  </div>
</section>
<section id="about">
  <div class="text-center">
    <h1>ABOUT ME</h1>
  </div>
</section>
<section id="contact">
  <div class="text-center">
    <h1>CONTACT ME</h1>
  </div>
</section>

（我正在使用Codepen）

Answer 1

请按照以下建议更正您的标记：

将#main-nav放入body
为每个部分添加一些内容（或只是通过CSS的高度），以创建可滚动的视口。
import Bootstrap 4需要JS文件来运行scrollspy组件逻辑。
将结束括号添加到.active CSS规则
使用元素html，head创建HTML标记，并记住关闭body标记（现代浏览器渲染无效的HTML相对较好，但鼓励遵循标记规则和最佳做法避免进一步的问题）

我创建了一个包含已实施更改的代码集https://codepen.io/ZorphDark/pen/mBQwYZ

Bootstrap的Scrollspy根本不工作

1 个答案: