Bootstrap Carousel 不工作，只是堆叠图像答案

【问题标题】：Bootstrap Carousel not working, just stacking imagesBootstrap Carousel 不工作，只是堆叠图像
【发布时间】：2018-10-24 01:31:42
【问题描述】：

我见过其他人有这个问题。在一种情况下，该人只是忘记了他们的 Bootstrap CDN，在另一种情况下，他们将所有幻灯片设置为“活动”并有多个“carousel-inner”类。这些事情我都没有做过。那么为什么我会收到这个错误？如果我“从源代码构建[他们的] Javascript”，我看到了一些关于需要 util.js 的内容，但我认为这不是我正在做的事情。我只是制作一个普通的旧网页。

<!DOCTYPE html>
<html lang ="en-us">
<head>
  <meta charset="UTF-8">
  <title>About Me</title>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>

    @font-face {
    font-family: Kunstler Script;
    src: url(kunstler.ttf);
}

  #content {
    display: none;
  }

    #time {
      font-weight: bold;
    }

@media only screen and (max-width: 768px) {

  img{
    height: 150px;
  }


  /*Why isn't google developer tools responding to the change I made?*/
  /*Okay, evidently I've got a lot to learn about responsive design.*/
}
</style>

</head>

<body onload = "showStuff()">


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Dennis Markham</a>
    </div>
    <ul class="nav navbar-nav">
      <li class = "active"><a href="index.html">About Me</a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</nav>

<div id = "content">

<div class ="row">
<div class = "col-md-1"></div>
<div class = "col-md-10">

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="images/me1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/me2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="images/me3.jpg" alt="Third slide">
    </div>
  </div>
</div>


<h1>About Me</h1><p>Good <span id = "time">afternoon</span> 
  (yes, I know what time it is), sir or madam.  My name is Dennis Markham.  I am 28 years old, and a recent graduate of the University
  of Texas Austin Coding Bootcamp.  I also graduated with Certificate in Web Development from Norwalk Community College.  I am currently
  an instructor for <a href = "https://www.codingwithkids.com/#!/"> Coding With Kids</a>.
  I am looking for a job in web development, preferably front end.  I am particularly fluent in HTML, CSS, Javascript, and 
  JQuery, but also have experience in Java, Node.js, AJAX, SQL, PHP, ES5, ES6, Mongo, Mongoose, and React, as well as substantial 
  experience with softwares/websites such as Sublime, Netbeans, GitBash, GitHub, and SQL Workbench.</p> 
  <p>Signed,</p>
<span style = "font-family: French Script MT; font-size: 3em;">Dennis E. Markham</span> 
</div>
<div class = "col-md-1"></div>
</div>

</div>

<script>
  function showStuff() {
    $("#content").fadeIn("slow");
}

var hours = parseFloat(moment().startOf('day').fromNow());
console.log(hours);

if (hours >= 17 || hours < 5)
{
 $("#time").text("evening");
}
else if (hours < 12)
{
  $("#time").text("morning");
}
else
{
  $("#time").text("afternoon");
}

</script>

</body>
</html>

【问题讨论】：

标签： twitter-bootstrap image carousel

【解决方案1】：

将您的引导 cdn 更新到最新的链接。检查https://getbootstrap.com/docs/4.1/getting-started/introduction/

【讨论】：