所以这是我的问题，我有两个旋转木马滑块，两者的宽度都不同。我需要修复它们，所以宽度都相似。我无法弄清楚如何改变Carousel 2的尺寸以匹配第一个旋转木马。两个滑块都有点不同。旋转木马2内的图像会变大，但我只需要两个旋转木马匹配的宽度。
你可以在这里看到我的页面。 http://modernstudiotest.jbglobal.net/slider_menu2.html
这是我的Html
.carousel-control.left,
.carousel-control.right {
background-image: none
}
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* Reposition the controls slightly */
.carousel-control {
left: -12px;
}
.carousel-control.right {
right: -12px;
}
/* Changes the position of the indicators */
.carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.carousel-indicators li {
background: #c0c0c0;
}
.carousel-indicators .active {
background: #000000;
}
.well {
background: #ffffff;
border-style: none;
}
.thumbnail {
border-style: none;
}
.col-mid-12 {
border-style: none;
}
.carousel-control {
position: absolute;
top: 40%;
/* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}<!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>Modern Studio Equipment – The leader in grip and rigging equipment, made in North Hollywood, CA USA</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ms_style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- /.Carousel 1 -->
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/modernmondays.jpg" alt="first slide image">
</div>
<div class="item">
<img src="images/slider1.jpg" alt="Second slide image">
</div>
<div class="item">
<img src="images/slider2.jpg" alt="Third slide image">
</div>
<div class="item">
<img src="images/slider3.jpg" alt="Second slide image">
</div>
<div class="item">
<img src="images/slider4.jpg" alt="Second slide image">
</div>
<div class="item">
<img src="images/slider5.jpg" alt="Second slide image">
</div>
<a class="carousel-control left" href="#carousel1" data-slide="prev">
<span class="icon-prev"></span>
<a class="carousel-control right" href="#carousel1" data-slide="next">
<span class="icon-next"></span>
</a>
</a>
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
<li data-target="#carousel1" data-slide-to="3"></li>
<li data-target="#carousel1" data-slide-to="4"></li>
<li data-target="#carousel1" data-slide-to="5"></li>
</ol>
</div>
</div>
<!-- /.Carousel 2 -->
<div class="container">
<div class="row">
<div class="col-md-20">
<div class="well" style="position: relative">
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1a.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1b.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1c.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1d.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_1e.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
</div>
<!--/row-fluid-->
</div>
<!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2a.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2b.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2c.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2d.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_2e.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
</div>
<!--/row-fluid-->
</div>
<!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3a.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3b.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3c.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3d.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
<div class="col-xs-2">
<a href="#x" class="thumbnail">
<img src="images/middle_slider_3e.jpg" alt="Image" style="max-width:125%;" />
</a>
</div>
</div>
<!--/row-fluid-->
</div>
<!--/item-->
</div>
<!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span>
<img src="images/ms_Lft_arrow.png" />
</span>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span>
<img src="images/ms_rt_arrow.png" />
</span>
</a>
</a>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>
答案 0 :(得分：0)
因为容器类调整为旋转木马宽度;
你可以解决这个问题;
<!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>Modern Studio Equipment – The leader in grip and rigging equipment, made in North Hollywood, CA USA</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/ms_style.css" rel="stylesheet" type="text/css">
</head>
<body >
<!-- /.Carousel 1 -->
<div id="carousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/modernmondays.jpg" alt="first slide image">
</div>
<div class="item">
<img src="images/slider1.jpg" alt="Second slide image">
</div>
<div class="item">
<img src="images/slider2.jpg" alt="Third slide image">
</div>
<div class="item">
<img src="images/slider3.jpg" alt="Second slide image">
</div>
<div class="item">
<img src="images/slider4.jpg" alt="Second slide image">
</div>
<div class="item">
<img src="images/slider5.jpg" alt="Second slide image">
</div>
<a class="carousel-control left" href="#carousel1" data-slide="prev">
<span class="icon-prev"></span>
<a class="carousel-control right" href="#carousel1" data-slide="next">
<span class="icon-next"></span>
</a></a>
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
<li data-target="#carousel1" data-slide-to="3"></li>
<li data-target="#carousel1" data-slide-to="4"></li>
<li data-target="#carousel1" data-slide-to="5"></li>
</ol>
</div>
</div>
<!-- /.Carousel 2 -->
<div class="container">
<div class="row">
<div class="col-md-20">
<div class="well" style="position: relative">
BLA BLA CONTENT
</div><!--/well-->
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="images/middle_slider_1a.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_1b.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_1c.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_1d.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_1e.jpg" alt="Image" style="max-width:125%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="images/middle_slider_2a.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_2b.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_2c.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_2d.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_2e.jpg" alt="Image" style="max-width:125%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
<div class="item">
<div class="row-fluid">
<div class="col-xs-2 col-xs-offset-1"><a href="#x" class="thumbnail"><img src="images/middle_slider_3a.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_3b.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_3c.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_3d.jpg" alt="Image" style="max-width:125%;" /></a></div>
<div class="col-xs-2"><a href="#x" class="thumbnail"><img src="images/middle_slider_3e.jpg" alt="Image" style="max-width:125%;" /></a></div>
</div><!--/row-fluid-->
</div><!--/item-->
</div><!--/carousel-inner-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span>
<img src="images/ms_Lft_arrow.png" />
</span>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span>
<img src="images/ms_rt_arrow.png" />
</span>
</a></a>
</div><!--/myCarousel-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
</body>
</html>