我正在使用Bootstrap 3x创建一个bootstrap轮播。我想要有两个div,一个用于显示大图(col-md-9),另一个用于显示相应的轮播标题(col-md-3)。我想在底部添加缩略图(col-md-12)。
目前,我能够显示带有缩略图的轮播,但当我尝试添加一个用于轮播标题的div时,它的显示效果不符合我的预期。 当前的代码:
目前,我能够显示带有缩略图的轮播,但当我尝试添加一个用于轮播标题的div时,它的显示效果不符合我的预期。 当前的代码:
<div class="container">
<div class ="row">
<!--Carousel-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active ">
<img class="image" src="img/construction.JPG">
</div><!-- /item -->
<div class="item">
<img class="image" src="img/scaffolding.JPG">
</div>
<div class="item">
<img class="image" src="img/construction-iron.JPG">
</div>
<div class="item">
<img class="image" src="img/Bridge-Construction-Swale-Bridge.JPG">
</div>
<div class="item">
<img class="image" src="img/industrial-building-construction-scaffolding.JPG">
</div>
<div class="item">
<img class="image" src="img/men-at-building-construction.JPG">
</div>
<div class="item">
<img class="image" src="img/Construction-Workers.JPG">
</div>
<div class="item">
<img class="image" src="img/building-construction.JPG">
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
</div>
<div class ="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/Bridge-Construction-Swale-Bridge.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/Construction-Workers.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
</div>
<!-- /.carousel -->
</div><!--/.container-->
尝试1,带标题 以下代码存在问题,标题的文字不显示
<div class="container">
<div class ="row">
<!--Carousel-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site! 5a4UkoC9vURkjKVHTBAgi7</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div><!-- /item -->
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction-iron.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Bridge-Construction-Swale-Bridge.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/industrial-building-construction-scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/men-at-building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Construction-Workers.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
</div>
<div class ="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/Bridge-Construction-Swale-Bridge.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/Construction-Workers.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
</div>
<!-- /.carousel -->
</div><!--/.container-->
尝试带标题的版本 2
以下代码存在问题:当浏览器窗口较小时,标题文本不会显示在大屏幕上,而是出现在大图像区域。
<div class="container">
<div class ="row">
<!--Carousel-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner ">
<div class="item active ">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site! 5a4UkoC9vURkjKVHTBAgi7</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div><!-- /item -->
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site2!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/construction-iron.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Bridge-Construction-Swale-Bridge.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/industrial-building-construction-scaffolding.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/men-at-building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/Construction-Workers.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
<div class="item">
<div class ="col-xs-12 col-sm-12 col-md-9 col-lg-9">
<img class="image" src="img/building-construction.JPG">
</div><!-- /col-xs-9 col-sm-9 col-md-9 col-lg-9 -->
<div class ="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div class="carousel-caption">
<h1>Welcome to our site!</h1>
<p>Take a look around and let us know if you have any questions.</p>
</div><!-- carousal-caption -->
</div><!-- /col-xs-3 col-sm-3 col-md-3 col-lg-3 -->
</div>
</div>
</div>
</div> <!-- /col-sm-6 -->
</div>
<div class ="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="clearfix">
<div id="thumbcarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="item active">
<div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/construction-iron.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/Bridge-Construction-Swale-Bridge.JPG" width="100" height="100"></div>
</div><!-- /item -->
<div class="item">
<div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/industrial-building-construction-scaffolding.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/men-at-building-construction.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/Construction-Workers.JPG" width="100" height="100"></div>
<div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/building-construction.JPG" width="100" height="100"></div>
</div><!-- /item -->
</div><!-- /carousel-inner -->
<a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- /thumbcarousel -->
</div><!-- /clearfix -->
</div> <!-- /col-sm-6 -->
</div>
<!-- /.carousel -->
</div><!--/.container-->