设置轮播图后出现图片上下排练，切换下一张后正常显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<style>
body{
padding-top: 50px;
}
.carousel{
height: 500px;
background-color: #000000;
}
.carousel .item{
height: 500px;
background-color: #000000;
}
.carousel img{
width: 100%;
}
@media (max-width: 768px) {
.carousel {
height: 300px;
margin-bottom: 30px;
}
.carousel .item {
height: 300px;
}
.carousel img {
min-height: 300px;
}
}
</style>
<title>Hello World</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span>Toggle navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<a href="#">某管理系统</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#">首页</a></li>
<li role="presentation">
<a id="drop4" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
功能
<span></span>
</a>
<ul id="menu1" aria-labelledby="drop4">
<li>业务功能</li>
<li><a href="#">信息建立</a></li>
<li><a href="#">信息查询</a></li>
<li><a href="#">信息管理</a></li>
<li role="separator"></li>
<li>系统功能</li>
<li><a href="#">设置</a></li>
</ul>
</li>
<li><a href="#contact">帮助</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--轮播图开始-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol>
<li data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div role="listbox">
<div class="item active">
<img src="img/chrome-big.jpg" alt="chrome">
<div>
<h1>Chrome</h1>
<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p>
<p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser" target="_blank">点我下载</a></p>
</div>
</div>
<div>
<img src="img/firefox-big.jpg" alt="firefox">
<div>
<h1>Firefox</h1>
<p>Mozilla Firefox,中文名通常称为“火狐”或者火狐浏览器，是一个开源网页浏览器</p>
<p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser" target="_blank">点我下载</a></p>
</div>
</div>
<div class="item active">
<img src="img/ie-big.jpg" alt="ie">
<div>
<h1>IE</h1>
<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p>
<p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser" target="_blank">点我下载</a></p>
</div>
</div>
<div class="item active">
<img src="img/opera-big.jpg" alt="opera">
<div>
<h1>opera</h1>
<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p>
<p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser" target="_blank">点我下载</a></p>
</div>
</div>
<div class="item active">
<img src="img/safari-big.jpg" alt="safari">
<div>
<h1>safari</h1>
<p>Google Chrome,又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器</p>
<p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser" target="_blank">点我下载</a></p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span>上一页</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span>下一页</span>
</a>
</div>
<!--轮播图结束-->
</body>
</html>
WenSen_2回答
-
平行维度
少了class="carousel-inner"不是每一个轮播项目都是class="item active"，后几个应该是class="item"
随时随地看视频慕课网APP
Bootstrap
Html/CSS