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;
  }
}

Answer 2

似乎可以正常使用：

.banner{
    padding: 0;
}

你的CSS生成正常吗？或者你有一个宽度超过2700像素的屏幕？

Answer 3

实际上你会惊讶地听到解决方案....只需删除

<div class="container-fluid">

之前的

<div id="myCarousel" class="col-xs-12 banner carousel slide">

这完全正常。使用Bootstrap Carousel时尝试避免container-fluid class

Bootstrap轮播全宽问题

3 个答案: