【发布时间】：2016-12-11 14:59:47
【问题描述】：
我有以下问题。
我正在使用引导轮播，我想执行以下操作。
当屏幕介于 MD 和 LG 尺寸之间时，我想要 3 个项目，里面有 2 个元素（图 a）。但是，当屏幕调整为 SM 和 XS 时，我将有 6 个项目，每个项目中有 1 个元素。 （图 B） 我不知道怎么做，如果可能的话。
ATM 我正在考虑创建 2 个不同的轮播，一个用于 LG 和 MD，另一个仅用于 SM XS，并通过@media 查询显示轮播 A 或 B。但我的客户只需要 1 个轮播，因为他需要使用他的数据库如果他有 2 个不同的轮播，那对他来说意味着更多的工作。
非常欢迎任何建议。
PS：我附上了一张图片和代码示例。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Affiliate marketing network delivering high quality affiliate programs for email marketing affiliates in the UK">
<meta name="Keywords" content="the affiliate people, affiliate people, affiliate marketing, affiliate network, affiliate programs, affiliate, affiliate program, affiliate marketing network, email markerting affiliates, email affiliate programs">
<meta name="robots" content="index,follow">
<title>
test</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Css -->
<link rel="stylesheet" type="text/css" href="TAP_css.css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="animate.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="TAP_js.js"></script>
<style>
body,td,th {
font-family: "Open Sans";
font-size: 16px;
color: #555;
background-color: #fff;
}
</style>
</head>
<body>
<!-- Reviews -->
<div class="rev_bg" id="test_bg">
<div class="container">
<div class="row">
<h3 class="rev_h3" id="test_h3"> TESTIMONIALS </h3>
<p class="rev_t">Our clients and affiliates thoughts about us.
Read more <span> <a href="LINK HERE">The test teste testimonials </a> </span></p>
<hr class="rev_hr">
</div>
</div>
<!-- CAROUSEL REV -->
<div class="container rev_carousel ">
<div class="row">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators rev_in20">
<li data-target="#myCarousel" data-slide-to="0" class="active rev_bg1"></li>
<li data-target="#myCarousel" data-slide-to="1" class="rev_bg1"></li>
<li class="rev_bg1" data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-md-6">1A TEST </div>
<div class="col-md-6">1B TEST </div>
</div>
</div>
<div class="item">2 </div>
<div class="item">3 </div>
<div class="item">4 </div>
<div class="item">5 </div>
<div class="item">6 </div>
</div>
<!-- Left and right controls -->
<a class="nobackground" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left rev_c_lef" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right nobackground " href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right rev_c_rig" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!--- END CAROUSEL REV -->
</div>
<!-- E Reviews -->
</body>
</html>【问题讨论】：
标签： javascript html css twitter-bootstrap carousel