gpt4 book ai didi

twitter-bootstrap - Bootstrap 左右字形图标没有显示在轮播中?

转载 作者:行者123 更新时间:2023-12-03 21:23:55 27 4
gpt4 key购买 nike

左右两个人字形字形图标没有显示,它可以工作,但由于某种原因它显示了一个方框。当我单击 glyhicons 所在的位置时,我可以滚动浏览图片,所以所有不正确的是 glyphicons 的外观通常预期的左右箭头没有显示?

<!DOCTYPE html>
<html>
<head>
<title>Student Association</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="carousel slide" data-ride="carousel" id="carousel-ex">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-ex"></li>
<li data-slide-to="1" data-target="#carousel-ex"></li>
<li data-slide-to="2" data-target="#carousel-ex"></li>
<li data-slide-to="3" data-target="#carousel-ex"></li>
<li data-slide-to="4" data-target="#carousel-ex"></li>
<li data-slide-to="5" data-target="#carousel-ex"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img alt="abuja" class="img-responsive" id=
"afCountries" src="img/african-countries/abuja-nigeria.jpg">
<div class="carousel-caption">
<h3>Abuja, Nigeria</h3>
</div>
</div>
<div class="item"><img alt="accra" class="img-responsive" id="afCountries" src=
"img/african-countries/accra-ghana.jpg">
<div class="carousel-caption">
<h3>Accra, Ghana</h3>
</div>
</div>
<div class="item"><img alt="kigali" class="img-responsive" id="afCountries"
src="img/african-countries/kigali-rwanda.jpg">
<div class="carousel-caption">
<h3>Kigali, Rwanda</h3>
</div>
</div>
<div class="item"><img alt="durban" class="img-responsive" id="afCountries"
src="img/african-countries/durban-southafrica.jpg">
<div class="carousel-caption">
<h3>Durban, South Africa</h3>
</div>
</div>
<div class="item"><img alt="Johannesburg" class="img-responsive" id=
"afCountries" src="img/african-countries/Johannesburg-South_Africa.jpg">
<div class="carousel-caption">
<h3>Johannesburg, South Africa</h3>
</div>
</div>
<div class="item"><img alt="kenya" class="img-responsive" id="afCountries" src=
"img/african-countries/kenya.jpg">
<div class="carousel-caption">
<h3>Kenya</h3>
</div>
</div>
</div>
<a class="left carousel-control" data-slide="prev" href=
"#carousel-ex"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" data-slide="next" href=
"#carousel-ex"><span class=
"glyphicon glyphicon-chevron-right"></span></a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
</body>
</html>

最佳答案

与 Jyrkim 类似,您的解决方案适用于 Bootply 和 JSFiddle 等编辑器。我唯一的想法是您缺少 Bootstrap 文件夹的字体部分。 White Squares是当前字体类型中找不到的字符的占位符,例如自定义字体中的特殊字符。它可能呈现为 []而不是 *& .确保您在 Bootstrap 中的文件夹结构设置如下:

bootstrap
-> css
-> bootstrap-theme.css
-> bootstrap-theme.css.map
-> bootstrap-theme.min.css
-> bootstrap.css
-> bootstrap.min.css
-> theme.css
-> fonts
-> glyphicons-halflings-regular.eot
-> glyphicons-halflings-regular.svg
-> glyphicons-halflings-regular.ttf
-> glyphicons-halflings-regular.woff
-> js
-> bootstrap.js
-> bootstrap.min.js

我敢打赌 fonts文件夹不存在,或未正确链接。如果您的文件夹结构与上述相同,您可以像这样链接 .css 文件:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

希望有帮助!

备注

使用样式表的 CDN 版本不会导致这成为问题,但可能会增加加载时间。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

关于twitter-bootstrap - Bootstrap 左右字形图标没有显示在轮播中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27555126/

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