为什么我的导航栏和传送带不工作？

这是我的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; 
}

来源

2017-06-05 Anthony Hulett

“不能得到正常的显示图像“不是一个很好的问题陈述。它们如何显示，以及你如何显示它们？你的例子是不完整的，所以如果你实际上包括jQuery和Bootstrap JS文件，请编辑你的问题。 –

@Anthony Hulett，如果你的问题更清楚，你可以避免downvotes，并坚持每个职位一个问题/主题。导航栏背景颜色是一个单独的问题。 :) – RubyRube

您需要添加文件的JavaScript bootstrapp的

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

来源

2017-06-05 03:34:48

我有一个链接到底部的引导文件和函数传送带的调用。那是你在说什么？ –

你检查html存在文件jquery.js？ –

所以我看，jquery的脚本不在那里。我添加了它，它工作！一切都没有。谢谢！现在进行更多的研究。 –

-1

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

会去到你的页面的头部

来源

2017-06-05 03:45:22

为什么downvote？ –

为什么我的导航栏和传送带不工作？

回答

相关问题