Question

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

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

Answer 1

好吧，快看之后，好像你的“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。希望这有帮助！

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

1 个答案: