Я новичок в Bootstrap, пытаюсь сделать отзывчивое меню.По какой-то причине наклейка не будет работать.Мой браузер его поддерживает, и, сравнивая мой код с другими работающими версиями, я просто не понимаю, почему он не работает.Я использую бутстрап 4.1.3.РЕДАКТИРОВАТЬ: добавил мой лист CSS, но я не знаю каких-либо возможных столкновений с липкой вершиной.
<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>
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;}
}