引导轮播按钮出现错误答案

【问题标题】：Bootstrap carousel buttons appearing wrong引导轮播按钮出现错误
【发布时间】：2014-06-09 23:13:12
【问题描述】：

对于我的网站，我在主页上使用了引导轮播。轮播可以工作，但由于某种原因，它没有显示下一个/上一个箭头。我可以单击箭头所在的位置来推进轮播。如果有人想检查这些元素，该网站是codehighway.org。这也是主页的代码。任何帮助都会很棒。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Code Highway</title>

    <!-- Bootstrap -->
    <link href="bootstrap.min.css" rel="stylesheet">

  </head>
  <body>

<!-- Code for the nav-bar -->

<div class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="Home.html">Code Highway</a>
  </div>
  <div class="navbar-collapse collapse navbar-responsive-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Lessons</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="cs1.html">Computer Science 1</a></li>
          <li><a href="cs2.html">Computer Science 2</a></li>
          <li><a href="#">Algorithms and Data Structures</a></li>
        </ul>
      </li>
      <li><a href="Blog.html">Blog</a></li>
      <li><a href="About.html">About</a></li>
    </ul>
  </div>
</div>

<!-- End of nav-bar -->

<!-- Start of carousel -->

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

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Slider Content (Wrapper for slides )-->
  <div class="carousel-inner">
    <div class="item active">
      <img src="test.jpg" alt="quote"  style="float: none;margin:0 auto;display: block;">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="test2.jpg" alt="quote"  style="float: none;margin:0 auto;display: block;">
      <div class="carousel-caption">
      </div>
    </div>
    <div class="item">
      <img src="test3.jpg" alt="quote"  style="float: none;margin:0 auto;display: block;">
      <div class="carousel-caption">
      </div>
    </div>    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>


<!-- End of carousel -->  



<!-- Code for jumbotron -->

<div class="jumbotron">
  <h1>Start learning code</h1>
  <p>Hello, I'm Maurice this is my personal website. I show programming concepts, my portfolio of projects, and a blog where I give tips tricks or any type of recommendations.</p>
</div>

<!-- End of jumbotron -->

  </body>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap.min.js"></script>
</html>

【问题讨论】：

我在我的开发者控制台中注意到，Bootstrap 的字形图标字体文件在您的网站上都是 404。

标签： jquery html css twitter-bootstrap carousel

【解决方案1】：

您的 Bootstrap 样式表托管在 http://codehighway.org/bootstrap.min.css。但是，此样式表正在 ../fonts/ 处搜索 glyphicon 字体文件。这个路径不存在，导致你的字体文件变成404，导致你的图标坏掉。

您应该将bootstrap.min.css 移至/css 的新目录，并将字体移至/fonts 的新目录。这应该可以解决您的相对路径问题并使图标正常工作。

另一种解决方案是使用像 Bootstrap CDN 这样的 CDN 为您托管这些文件（他们的 bootstrap.min.css 版本包含指向他们托管的 glyphicon 字体文件的链接）。

【讨论】：

谢谢 Nicolas，你是对的。这是一个快速修复，感谢您的帮助。