为什么我的.sticky-top类在Bootstrap 4中不起作用? [英] Why is my .sticky-top class not working in Bootstrap 4?
问题描述
我是Bootstrap的新手，试图制作响应式菜单.出于某种原因，粘性顶无法正常工作.我的浏览器确实支持它，并且将我的代码与其他工作版本进行比较，我只是看不到为什么它不起作用.我正在使用Bootstrap 4.1.3.
I am new to Bootstrap, trying to make responsive menu. For some reason sticky-top won't work. My browser does support it, and comparing my code to other working versions I just can't see why it's not working. I am using bootstrap 4.1.3.
这是我的代码；我不知道与sticky-top可能发生的任何碰撞.
Here is my code; I am not aware of any possible collisions with sticky-top.
h1,h2,h3,h4,p,ul,ol,li,body {
margin: 0;
padding: 0;
}
a {
transition: all 0.3s ease-out;
}
a:hover {
transition: all 0.3s ease-out;
}
.container {
margin: auto;
}
.clearfix:after, .clearfix:before {
content: "";
display: block;
clear: both;
}
*, *:after, *:before {
box-sizing: border-box;
}
@media screen and (max-width: 479px) {
.container {width: 92%}
}
@media screen and (min-width: 480px) {
.container {width: 95%}
}
@media screen and (min-width: 740px) {
.container {width: 95%}
}
@media screen and (min-width: 960px) {
.container {width: 95%}
}
@media screen and (min-width: 1200px) {
.container {width: 1200px}
}
.dropdown-menu {
background: #0F574F;
}
.navbar {
padding: 3px 0;
background: #db8259;
border-bottom: 6px solid #886453;
}
.mainmenu ul li {
width: 140px;
}
.mainmenu ul li a {
background: #0F574F;
font-weight: 700;
text-decoration: none;
padding: 12px 20px;
display: block;
color: #fff;
}
.mainmenu ul > li:hover > a {
background: #588883;
}
.mainmenu ul li ul {
background: #db8259;
}
.mainmenu {
text-align: center;
}
.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.btn-outline-dark.dropdown-toggle {
background-color: #0b3e38;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #fff;
background-color: #588883;
}
@media screen and (max-width: 991px) {
.mainmenu ul li a {padding: 8px 0; display: block; margin:0 auto 3px;}
.navbar-nav {padding-right: 145px;}
.dropdown-item, .mainmenu ul li a {width: 300px;}
.dropdown-item {text-align: center;}
.dropdown-menu {margin-left: -3px; width: 320px;}
}
<head>
<title>CB Horní Počernice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-4.1.3-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/all.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700&subset=latin-ext" rel="stylesheet">
</head>
<header>
<nav class="navbar navbar-expand-lg mainmenu justify-content-center sticky-top">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Domů</a></li>
<li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Historie</a></li>
<li class="nav-item dropdown"><a class="nav-link btn btn-outline-dark dropdown-toggle mx-2" id="navbardrop" role="button" data-toggle="dropdown" href="#">Program</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Aktuální program</a>
<a class="dropdown-item" href="#">Sborový dopis</a>
<a class="dropdown-item" href="#">Texty</a>
</div>
</li>
<li class="nav-item dropdown"><a class="nav-link btn btn-outline-dark dropdown-toggle mx-2" id="navbardrop" role="button" data-toggle="dropdown" href="#">Služby</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Křty</a>
<a class="dropdown-item" href="#">Svatby</a>
<a class="dropdown-item" href="#">Pohřby</a>
</div>
</li>
<li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Galerie</a></li>
<li class="nav-item"><a class="nav-link btn btn-outline-dark mx-2" role="button" href="#">Kontakt</a></li>
</ul>
</nav>
</header>
推荐答案
我无法使用引导程序完全解决此问题.郭嘉晨提出的只是部分解决方案，因为它禁止我在标头中添加任何内容.
I was not able to fully solve this with bootstrap. What Jiachen Guo proposed was only a partial solution, as it prohibits me to add anything into the header.
我通过添加来自w3schools的JavaScript解决了这一问题: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp 这样还可以进行更多自定义.因此，这是我向那些对bs4中的粘顶类有问题的人的建议.
I solved this with just adding javascript from w3schools: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp This enables for more customization as well. So this is what I would recommend to people having trouble with sticky-top class in bs4.
这篇关于为什么我的.sticky-top类在Bootstrap 4中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
