jquery - Bootstrap 轮播全宽问题

Question

我正在使用 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 {margin: 0!important; padding: 0!important} 但它不会删除每一边的边距。

Answer 1

Bootstrap 在轮播上有默认的内边距。

#myCarousel{
  padding: 0px;
}

请注意，在移动设备上，您实际上可能希望这样做，以防止您的字幕出现在设备屏幕的边缘。您可以通过删除大屏幕上的填充来做到这一点:

@media(min-width: 996px){
  #myCarousel{
    padding: 0px;
  }
}