我正在使用bootstrap v 3.3.5的轮播，其背景图片需要为全角。我在背景图像上设置了最小高度，以便显示完整图像。但是幻灯片的左右两侧都有空白，我似乎无法摆脱。
我的HTML：
<header id="header">
<div class="container-fluid">
<div class="row">
<div id="myCarousel" class="col-xs-12 banner carousel slide">
<div class="carousel-inner">
<div class="fox-img1"></div>
<div class="active item item1">
<h2>
Ever wondered what goes into making a brake pad?
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus congue ante sed sagittis.
Quisque ves tibulum lectus et posuere commodom.
</p>
<a class="case-study" href="#">View Case Study</a>
</div>
<div class="item item2">
<h2>
Heading 2 Goes Here
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus congue ante sed sagittis.
Quisque ves tibulum lectus et posuere commodom.
</p>
<a class="case-study" href="#">View Case Study</a>
</div>
<div class="item item3">
<h2>
Heading 3 Goes Here
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus congue ante sed sagittis.
Quisque ves tibulum lectus et posuere commodom.
</p>
<a class="case-study" href="#">View Case Study</a>
</div>
<div class="item item4">
<h2>
Heading 4 Goes Here
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut luctus congue ante sed sagittis.
Quisque ves tibulum lectus et posuere commodom.
</p>
<a class="case-study" href="#">View Case Study</a>
</div>
</div><!-- end carousel-inner -->
<ol class="carousel-indicators dots">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
<li data-slide-to="3" data-target="#myCarousel"></li>
</ol>
</div><!-- end banner -->
</div>
</div><!-- end container-fluid -->
</header><!-- end header -->
CSS：
.carousel, .item {overflow: hidden;}
.carousel-inner .item {transition: 0.4s ease-in-out left;}
.banner .carousel-inner {margin: 0;}
.banner {
margin-top: -40px;
margin-bottom: -1px;
position: relative;
}
.fox-img1 {
width: 436px;
height: 682px;
background: url(../img/avatar.png) no-repeat;
position: absolute;
right: 0; top: 0;
z-index: 99;
}
.banner .item {
min-height: 730px;
}
.item1 {background: url(../img/banner-img1b.jpg) top center no-repeat;}
.item2 {background: url(../img/banner-img1b.jpg) top center no-repeat;}
.item3 {background: url(../img/banner-img1b.jpg) top center no-repeat;}
.item4 {background: url(../img/banner-img1b.jpg) top center no-repeat;}
我尝试添加.banner {保证金：0！important; padding：0！important}，但不会删除每边的边距。
Bootstrap在轮播上具有默认填充。
#myCarousel{
padding: 0px;
}
请注意，在移动设备上，您实际上可能希望这样做，以防止字幕进入设备屏幕的边缘。您只需删除大屏幕上的填充即可：
@media(min-width: 996px){
#myCarousel{
padding: 0px;
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句