Twitter bootstrap 自举';他根本不工作
我需要帮助设置引导程序的Scrollspy。我遵循了文档中的指导原则,没有工作。请帮我找到这个问题的解决办法 我在body元素中使用数据属性,并将位置设置为相对位置 这是我的HTML代码:Twitter bootstrap 自举';他根本不工作,twitter-bootstrap,bootstrap-4,scrollspy,Twitter Bootstrap,Bootstrap 4,Scrollspy,我需要帮助设置引导程序的Scrollspy。我遵循了文档中的指导原则,没有工作。请帮我找到这个问题的解决办法 我在body元素中使用数据属性,并将位置设置为相对位置 这是我的HTML代码: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv5
<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>
身体{
高度:100vh;
背景:url(“https://image.ibb.co/i1Qu1R/Adobe_Stock_123146928.png)无重复固定;
背景尺寸:封面;
位置:相对位置;
顶部:121px;
}
.主动{
颜色:黑色!重要;
家
画廊
关于我
联系我
(我正在使用Codepen)请按照以下建议更正您的标记:
- 将
置于#主导航
机身内
- 向每个部分添加一些内容(或通过CSS仅添加高度),以便创建可滚动的视口
- 导入引导4所需的JS文件以运行scrollspy组件逻辑
- 将结束括号添加到
CSS规则.active
- 使用元素
,HTML
创建HTML标记,并记住关闭head
标记(现代浏览器将无效HTML呈现得相对较好,但鼓励遵循标记规则和最佳实践以避免进一步的问题)body
我已经创建了一个代码笔,其中包含已实施的更改您能在我的笔中使用它吗: