我最近几个月一直在为我目前的工作做准备,并通过bootstrap在我的网站右侧创建了一个浮动+滚动导航栏。然而,从3周的休息回到我的网站后,我发现导航栏突然断了(没有代码被更改)。我已经尝试查看代码,但我无法找到任何问题,为什么它突然崩溃。有人有任何想法吗?
This is an older image of the website (before making things a bit less blockish) that shows how the navigation bar on the right was. 滚动时条形图也会改变颜色,无论页面向下有多远(浮动),它都始终在右侧。
编辑: This is how the right bar has broken (along the top of the screen, and no longer floats or scrolls)
编辑2: 检查后,我发现微软边缘和Internet Explorer 10中的一切都运行良好,但在谷歌浏览器中,它已被破坏(无法检查其他探险家)。
样式表代码
.rightjump {
margin: 0;
padding: 10px 10px 0px 0px;
list-style-type: none;
width: 180px;
position: fixed;
overflow: auto;
display: contents;
right: 0;
}
.rightjumplist {
display: block;
background-color: greenyellow;
padding: 8px 8px;
text-decoration: none;
color: black;
text-align: center;
border-bottom: 1px solid black;
border-radius: 5px 40px 5px 40px;
}
.rightjumplist:hover {
background-color: lightgray;
color: black;
}
.activelist.active {
background-color: forestgreen;
color: black;
}
主要HTML代码:
<!DOCTYPE HTML>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="icon" href="images/logo-small.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title></title>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="50">
<!--#Floating verticle contents bar-->
<nav>
<ul class="leftcontents">
<li class="leftcontentslist" style="background-color: lightgray"><img src=images/logo-large.png width="155px" height="155px"></li>
<li class="leftcontentslist"><a id="a01" href="home.html">Home</a></li>
<li class="leftcontentslist"><a id="a01" href="horizon1.html">New Horizon 1</a></li>
<li class="leftcontentslist"><a id="a01" href="horizon2.html">New Horizon 2</a></li>
<li class="leftcontentslist"><a id="a01" href="horizon3.html">New Horizon 3</a></li>
<li class="leftcontentslist"><a id="a01" href="try1.html">We Try 1</a></li>
<li class="leftcontentslist"><a id="a01" href="try2.html">We Try 2</a></li>
<li class="leftcontentslist"><a id="a01" href="can1.html">We Can 1</a></li>
<li class="leftcontentslist"><a id="a01" href="can2.html">We Can 2</a></li>
</ul>
</nav>
<!--#Floating verticle jump bar (right)-->
<nav class="navbar navbar-inverse" id="myScrollspy">
<ul id="navbar" class="rightjump nav nav-pills nav-stacked">
<li class="active activelist rightjumplist"><a id="a01" href="#Top">Top</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#Bingo">Bingo</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#Wordsearch">Wordsearch</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#PDF1">Activity</a></li>
<li class="active activelist rightjumplist"><a id="a01" href="#PDF2">Activity 2</a></li>
</ul>
</nav>
</html>
很抱歉,如果这有任何错误,请先在此处发帖。谢谢你的帮助^^
答案 0 :(得分:0)
好吧,快看之后,好像你的“rightjump”元素上的显示元素没有正确设置。目前这就是它的样子:
.rightjump {
margin: 0;
padding: 10px 10px 0px 0px;
list-style-type: none;
width: 180px;
position: fixed;
overflow: auto;
display: contents;
right: 0;
}
你想要的样子是这样的:
.rightjump {
margin: 0;
padding: 10px 10px 0px 0px;
list-style-type: none;
width: 180px;
position: fixed;
overflow: auto;
display: block;
right: 0;
}
注意:我在这里所做的是将它从display:contents更改为display:block。希望这有帮助!