twitter-bootstrap 为什么我的 .sticky-top 类在 Bootstrap 4 中不起作用？

Question

提问by Pavel Horyna

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.

我是 Bootstrap 的新手，正在尝试制作响应式菜单。由于某种原因，sticky-top 不起作用。我的浏览器确实支持它，将我的代码与其他工作版本进行比较，我只是不明白为什么它不起作用。我正在使用引导程序 4.1.3。

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&amp;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="#">Sborovy 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>

Answer 1

采纳答案by Pavel Horyna

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.

我无法用引导程序完全解决这个问题。郭嘉臣提出的只是部分解决方案，因为它禁止我在标题中添加任何内容。

I solved this with just adding javascript from w3schools: https://www.w3schools.com/howto/howto_js_navbar_sticky.aspThis enables for more customization as well. So this is what I would recommend to people having trouble with sticky-top class in bs4.

我通过从 w3schools 添加 javascript 解决了这个问题：https: //www.w3schools.com/howto/howto_js_navbar_sticky.asp这也支持更多的自定义。所以这就是我向在 bs4 中的粘性顶级类遇到问题的人推荐的。

Answer 2

回答by Jiachen Guo

What browser you are using?

您使用的是什么浏览器？

position: stickyis not fully supported in all browsers.

position: sticky并非所有浏览器都完全支持。

In IE11 and IE10 will render position: sticky as position: relative.

在 IE11 和 IE10 中，会将 position:sticky 渲染为 position:relative。

updated: set class name "sticky-top" in <header>will work because it's relative sticky to the parent element, in this case, it's the whole HTML body

更新：设置类名“sticky-top”<header>将起作用，因为它相对于父元素具有粘性，在这种情况下，它是整个 HTML 主体

<header class="sticky-top">

Answer 3

回答by diego sanches

One more thing to check is if any parent element has one of these css properties set:

要检查的另一件事是是否有任何父元素设置了以下 css 属性之一：

overflow
overflow-y
overflow-x

溢出
溢出-y
溢出-x

If this property is set to one of these vales it will NOT work: auto, hidden, overlay, scroll.

如果此属性设置为以下值之一，它将不起作用：自动、隐藏、覆盖、滚动。

The best solution is to remove it or change its value to 'unset'

最好的解决方案是删除它或将其值更改为“未设置”

Answer 4

回答by Vikram Patil

As you can see it's easy to implement. However, if your element isn't sticking as expected the first thing to check are the rules applied to the container.

如您所见，它很容易实现。但是，如果您的元素没有按预期粘贴，首先要检查的是应用于容器的规则。

Specifically, look for any overflow property set on the parent. You can't use: overflow: hidden, overflow: scrollor overflow: autoon the parent of a position: sticky element.

具体来说，查找在父级上设置的任何溢出属性。您不能使用: overflow: hidden,overflow: scroll或overflow: auto在 position: 粘性元素的父元素上使用。

If you're not using overflow and still having problems it's worth checking if a height is set on the parent? This may constrain the sticky positioning, stopping it from occurring. Remove the height and see if that fixes the problem.

如果您没有使用溢出并且仍然有问题，那么值得检查是否在父级上设置了高度？这可能会限制粘性定位，阻止它发生。删除高度，看看是否能解决问题。

Answer 5

回答by Vivek Singh

In my case the nav-bar was in a section, so sticky-top wasn't working. So, taking the nav-bar out of the section or making the section sticky-top works!

在我的情况下，导航栏位于一个部分中，因此sticky-top 不起作用。因此，将导航栏移出该部分或使该部分粘在顶部起作用！

twitter-bootstrap 为什么我的 .sticky-top 类在 Bootstrap 4 中不起作用？

提问by Pavel Horyna

采纳答案by Pavel Horyna

回答by Jiachen Guo

回答by diego sanches

回答by Vikram Patil

回答by Vivek Singh

相关推荐

最近更新

标签

twitter-bootstrap 为什么我的 .sticky-top 类在 Bootstrap 4 中不起作用？

提问by Pavel Horyna

采纳答案by Pavel Horyna

回答by Jiachen Guo

回答by diego sanches

回答by Vikram Patil

回答by Vivek Singh

相关推荐

twitter-bootstrap Bootstrap 4 图像缩略图类

twitter-bootstrap Bootstrap 3 卡

twitter-bootstrap Bootstrap 4. 在 .nav-link 上平滑滚动，但不适用于其他锚元素

twitter-bootstrap Bootstrap 4 Navbar 和内容填充高度 flexbox

相关推荐

最近更新

标签