文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的.高年级学生没有在Bootstrap 4中工作？

问为什么我的.高年级学生没有在Bootstrap 4中工作？
EN

Stack Overflow用户

提问于 2018-09-30 17:43:25

回答 8查看 54.9K关注 0票数 20

我是新来的Bootstrap，试图做出响应菜单。因为某种原因粘顶不起作用。我的浏览器确实支持它，并将我的代码与其他工作版本进行比较，我只是不明白为什么它不能工作。我正在使用引导4.1.3。

这是我的代码，我不知道有任何可能与粘顶碰撞。

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="#">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>

html

css

twitter-bootstrap

回答 8

Stack Overflow用户

回答已采纳

发布于 2019-08-29 13:56:33

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

溢出
溢出-y
溢出-x

如果这个属性被设置为这些值中的一个，它将无法工作:自动，隐藏，覆盖，滚动。

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

票数 31

Stack Overflow用户

发布于 2018-09-30 18:01:03

您使用的浏览器是什么？

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

在IE11和IE10中，位置:粘滞将呈现为相对位置。

更新:在<header>中设置类名“粘滞顶”将工作，因为它相对于父元素粘着，在本例中，它是整个HTML

<header class="sticky-top">

票数 19

Stack Overflow用户

发布于 2019-09-11 18:30:35

正如您所看到的，它很容易实现。但是，如果您的元素没有像预期的那样粘住，那么首先要检查的是应用于容器的规则。

特别是，查找父服务器上设置的任何溢出属性。不能将：overflow: hidden、overflow: scroll或overflow: auto用于位置的父元素:粘滞元素。

如果您没有使用溢出，并且仍然存在问题，那么是否应该检查是否在父节点上设置了一个高度？这可能会限制粘性定位，阻止其发生。移除高度，看看这是否解决了问题。

票数 7

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52580504

复制

相似问题

问为什么我的.高年级学生没有在Bootstrap 4中工作？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的.高年级学生没有在Bootstrap 4中工作？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的.高年级学生没有在Bootstrap 4中工作？
EN