浮动+滚动导航栏坏了 - bootstrap

时间:2018-04-11 01:40:31

标签: jquery html css

我最近几个月一直在为我目前的工作做准备,并通过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>

很抱歉,如果这有任何错误,请先在此处发帖。谢谢你的帮助^^

1 个答案:

答案 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。希望这有帮助!