Bootstrap 4 粘性顶部不起作用 [英] Bootstrap 4 Sticky top not working
本文介绍了Bootstrap 4 粘性顶部不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在为我的网站设计一个粘性顶部导航栏，我遵循了 Bootstrap 在他们网站上提供的文档，并查看了以前在这里提出的问题，但我无法理解为什么它不起作用.任何帮助都会很棒
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"><div class="collapse navbar-collapse justify-content-center" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="about.html">关于</a><li class="nav-item"><a class="nav-link" href="#">服装</a><li class="nav-item"><a class="nav-link" href="#">服装</a></nav></html>
CSS
.navbar {背景颜色:#2A2F35 ！重要；填充:0！重要；}/*导航栏链接*/.navbar-nav a {font-family: 'Open Sans', sans-serif;字体样式:正常；字体大小:16px；字体粗细:100；字母间距:1px；颜色:#ffffff ！重要；填充:25px；边距:0px 25px 0px 25px；}.navbar-nav a:hover {颜色:#ff6600 ！重要；} 解决方案
导入 bootstrap 4 后，以下代码完美运行
.navbar {背景颜色:#2A2F35 ！重要；填充:0！重要；}/*导航栏链接*/.navbar-nav a {font-family: 'Open Sans', sans-serif;字体样式:正常；字体大小:16px；字体粗细:100；字母间距:1px；颜色:#ffffff ！重要；填充:25px；边距:0px 25px 0px 25px；}.navbar-nav a:hover {颜色:#ff6600 ！重要；}.高度{边框:1px 纯红色；最小高度:500px；}<!-- 最新编译和缩小的 CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"><!-- jQuery 库--><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- 波普尔 JS --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><!-- 最新编译的 JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><!--导航栏开始--><nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top"><div class="collapse navbar-collapse justify-content-center" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="about.html">ABOUT</a><li class="nav-item"><a class="nav-link" href="#">服装</a><li class="nav-item"><a class="nav-link" href="#">服装</a></nav><div class="height">
I'm designing a sticky top navbar for my website, I've followed the documentation provided by Bootstrap on their website and looked at previously asked questions on here but I can't get my head round on why its not working. Any help would be great
<!DOCTYPE html>
<html>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CLOTHING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CLOTHING</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
CSS
.navbar {
background-color: #2A2F35 !important;
padding: 0 !important;
}
/*Navbar Links*/
.navbar-nav a {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-size: 16px;
font-weight: 100;
letter-spacing: 1px;
color: #ffffff !important;
padding: 25px;
margin: 0px 25px 0px 25px;
}
.navbar-nav a:hover {
color: #ff6600 !important;
}
解决方案
The following Code Works perfectly once you import bootstrap 4
.navbar {
background-color: #2A2F35 !important;
padding: 0 !important;
}
/*Navbar Links*/
.navbar-nav a {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-size: 16px;
font-weight: 100;
letter-spacing: 1px;
color: #ffffff !important;
padding: 25px;
margin: 0px 25px 0px 25px;
}
.navbar-nav a:hover {
color: #ff6600 !important;
}
.height{
border:1px solid red;
min-height:500px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--Nav bar Starts-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CLOTHING</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CLOTHING</a>
</li>
</ul>
</div>
</nav>
<div class="height">
</div>
这篇关于Bootstrap 4 粘性顶部不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
