我正在创造一个简单的 HTML 模板 http://zulhfreelancer.com/projects/omar/使用Bootstrap 3。我在中等尺寸显示中检查模板,看起来不错。但是当我在更大的显示器(和更高分辨率)中检查它时,我在轮播内图像的右侧看到一些空白。
截屏:
我的轮播代码:
<!-- Carousel
================================================== -->
<div class="clearfix"></div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">
</li>
<li data-target="#myCarousel" data-slide-to="1">
</li>
<li data-target="#myCarousel" data-slide-to="2">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/4.jpg">
<div class="container">
<div class="carousel-caption">
<h1>
Example headline.
</h1>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">
Call to Action
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="img/5.jpg">
<div class="container">
<div class="carousel-caption">
<h1>
Another example headline.
</h1>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">
Register Now
</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="img/6.jpg">
<div class="container">
<div class="carousel-caption">
<h1>
One more for good measure.
</h1>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
<a class="btn btn-lg btn-primary" href="#" role="button">
Read Blog
</a>
</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left">
</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right">
</span>
</a>
</div>
<!-- end #mycarousel -->
如何解决这个问题?
我尝试在 Carousel 类之前插入容器类,但这并没有给我全宽 Carousel。我想要全宽的轮播,而不是包裹在容器类宽度中。
在你的CSS中
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
display: block;
height: auto;
max-width: 100%;
line-height: 1;
width: 100%; // Add this
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)