为什么我的导航栏和轮播不起作用？答案

【问题标题】：Why is my navbar and carousel not working?为什么我的导航栏和轮播不起作用？
【发布时间】：2017-06-09 04:32:23
【问题描述】：

这是我目前的 HTML 文本。我在使用轮播时遇到困难，无法让它正确显示图像。除了轮播不工作之外，我的导航栏背景颜色也有问题。它不会保持在 100% 的宽度。回到轮播，当我尝试实时查看并单击箭头转到下一个或上一个时，重置它在导航栏后面的位置。

<html>
    <head>
        <title>Funky Munky Arcade</title>

        <meta name="viewport" content="width=device-width, initional-scale=1">

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

        <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body>

        <nav class="navbar navbar-default navbar-fixed-top">

            <div class="container nav-container">

                    <ul class="nav nav-justified">
                        <li><a href="#">Parties</a></li>
                    </ul>

                <div class="navbar-header">

                    <a href="/index.html" class="navbar-left"><img src="http://i.imgur.com/UXms4Eq.png" class="logo"></a>

                </div>

                    <ul class="nav nav-justified">
                        <li><a href="#">Contact</a></li>
                    </ul>

            </div>

        </nav>

        <!-- Beginning of Carousel -->


        <div class="carousel slide" id="bannerslides" data-ride="carousel">

            <!-- Indicators -->

            <ol class="carousel-indicators">

                <li data-target="#bannerslides" data-slide-to="0" class="active">
                </li>

                <li data-target="#bannerslides" data-slide-to="1">
                </li>

                <li data-target="#bannerslides" data-slide-to="2">
                </li>

                <li data-target="#bannerslides" data-slide-to="3">
                </li>

            </ol>

            <!-- End of Indicators -->

            <!-- Wrapper for Slides -->

            <div class="carousel-inner">

                <div class="item active">

                    <img src="https://db.tt/W08hePZ53h">

                </div>

                <div class="item">

                    <img src="http://i.imgur.com/t0Y4JDI.png">

                </div>

                <div class="item">

                    <img src="http://i.imgur.com/zaUETSd.png">

                </div>

                <div class="item">

                    <img src="http://i.imgur.com/LRATkRS.png">

                </div>

            </div>

            <!-- End of Wrapper -->

            <!-- Beginning of Carousel Controls -->

            <a class="left carousel-control" href="#bannerslides" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>

            <a class="right carousel-control" href="#bannerslides" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>

            <!-- End of Carousel Controls -->

        </div>

        <!-- End of Carousel -->

这是我的 CSS：

.nav-container {
display: flex;
align-items: center;
background-color: red;
width: 100%;
}
.head {
text-align: center;
}
.intro{
font-size: 48px;
text-align: center;
}
.jumbotron{
background-color: white;
font-size: 24px;
}
.navbar-fixed-top{
background-color: red;
border: 0px;
}
.logo{
background-color: white;
border-radius: 50%;
}
.carousel{
margin-top: 150px;
}

【问题讨论】：

“不能让它正确显示图像”不是一个很好的问题陈述。它们如何显示，您期望它们如何显示？您的示例不完整，因此如果您实际上包含 jQuery 和 Bootstrap JS 文件，请编辑您的问题。
@Anthony Hulett，如果你让你的问题更清楚，你可以避免投反对票，并在每个帖子中坚持一个问题/主题。导航栏背景颜色是一个单独的问题。 :)

标签： html css twitter-bootstrap carousel

【解决方案1】：

你需要添加 bootstrap 的文件 javascript

提示：插件可以单独包含（使用 Bootstrap 的单独“carousel.js”文件），也可以一次全部包含（使用“bootstrap.js”或“bootstrap.min.js”）。 ref here

【讨论】：

我在底部有一个引导文件的链接和一个函数轮播的调用。你说的是这个吗？
你检查html是否存在jquery.js文件？
所以我查看了 jquery 的脚本不存在。我添加了它，它起作用了！一切都做了。谢谢！现在进行更多研究。

【解决方案2】：

您需要 jQuery 的 CDN。

可以在 jQuery 网站上找到：https://code.jquery.com/

所以：

<script
    src="https://code.jquery.com/jquery-3.2.1.js"
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>

会进入页面顶部

【讨论】：