为什么我的Navbar和Carousel不起作用

这是我当前HTML的文本。我在旋转木马方面遇到困难，无法正确显示图像。在旋转木马无法正常工作的顶部，我的导航栏背景颜色有问题。它不会保持100％的宽度。返回旋转木马，当我尝试实时视图并单击箭头进行下一个或上一条上一条箭头时，将其放置在Navbar后面。

<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;
}

您需要添加bootstrapp的javascript

提示：可以单独包含插件(使用Bootstrap的单个" carousel.js"文件(，也可以立即包含插件(使用" Bootstrap.js"或" Bootstrap.js"或" Bootstrap.min.js"(。参考在这里

您需要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>

将进入您页面的头部

相关内容

最新更新

热门标签：