gpt4 book ai didi

jquery - Bootstrap 旋转木马按钮出现错误

转载 作者:行者123 更新时间:2023-11-28 17:41:11 26 4
gpt4 key购买 nike

对于我的网站,我在主页上使用了 bootstrap carousel。旋转木马有效,但由于某种原因它没有显示下一个/上一个箭头。我可以单击箭头所在的位置来推进旋转木马。网址是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 样式表托管在 http://codehighway.org/bootstrap.min.css .但是,此样式表正在 ../fonts/ 处搜索字形字体文件。此路径不存在,这会导致您的字体文件为 404,从而导致您的图标损坏。

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

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

关于jquery - Bootstrap 旋转木马按钮出现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24092445/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com