Twitter bootstrap 引导左侧和右侧图示符图标未显示在旋转木马中?
两个左右V字形图标不显示,它可以工作,但出于某种原因,它显示了一个方形框。当我点击GLYH图标所在的位置时,我可以在图片中滚动,因此所有不正确的地方就是通常预期的左右箭头不显示的字形图标的外观Twitter bootstrap 引导左侧和右侧图示符图标未显示在旋转木马中?,twitter-bootstrap,Twitter Bootstrap,两个左右V字形图标不显示,它可以工作,但出于某种原因,它显示了一个方形框。当我点击GLYH图标所在的位置时,我可以在图片中滚动,因此所有不正确的地方就是通常预期的左右箭头不显示的字形图标的外观 <!DOCTYPE html> <html> <head> <title>Student Association</title> <link rel="stylesheet" href="css/bootstrap.min.
<!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和JSFIDLE等示例编辑器。我唯一的想法是您缺少引导文件夹的字体部分<代码>白色方块是在当前字体类型中找不到的字符的占位符,如自定义字体中的特殊字符。它可以呈现为[]
而不是*
或&
之类的内容。确保引导中的文件夹结构设置如下:
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
我敢打赌font
文件夹不在那里,或者链接不正确。如果您的文件夹结构与上述相同,则可以按如下方式链接.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">
很抱歉,我无法重现此问题。我试图在Bootply重现这个问题:用不同的图像。我在谷歌上搜索了一些不同大小的图片进行测试,但我唯一一次在旋转木马中有一些方形框,是在找不到图片的时候(我的图片URL地址不对)。因此,如果有人决定看一下Bootply测试,那么请注意这些图片是我(迅速)选择的。