简体   繁体   English

引导程序:ScrollSpy和平滑滚动

[英]Bootstrap: ScrollSpy and smooth scroll

I have two problems with Bootstrap: I can't add ScrollSpy and smooth scroll at my Boostrap site. 我在Bootstrap中遇到两个问题:无法在Boostrap站点上添加ScrollSpy和平滑滚动。

<body data-spy="scroll" data-target="#test">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div id="test" class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-  target=".navbar-ex1-collapse">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">L</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
 <div id="test" class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
  <li class=""><a href="#Chi Sono">Chi Sono</a></li>
  <li><a class="scroll" href="#Conoscenze">Conoscenze</a></li>
  <li><a href="#OS" >Sistemi operativo</a></li>


 </div><!-- /.navbar-collapse -->
  </nav>

This is the navbar code. 这是导航栏代码。 I've tried many solutions, but to no avail. 我尝试了许多解决方案,但无济于事。 How do I add this effect? 如何添加此效果?

replace 更换

      <div id=test ...>

with

       <nav id=test...>

add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component. 将data-target属性与任何Bootstrap .nav组件的父元素的ID或类一起添加。 Since you are using div when defining id of data-target for scrollspy, it won't work. 由于您在为scrollspy定义数据目标的ID时使用了div,因此它将不起作用。 use nav instead http://getbootstrap.com/javascript/#scrollspy 使用导航代替http://getbootstrap.com/javascript/#scrollspy

And another error in this part of your code here 还有这部分代码中的另一个错误

   </div><!-- /.navbar-collapse -->
</nav>

do the navbar-collapse with nav tag not the div tag. 用nav标签而不是div标签进行navbar折叠。

so the correct code is 所以正确的代码是

   </nav><!-- /.navbar-collapse -->
</nav>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM