Bootstrap传送带全宽问题

我正在使用bootstrap v 3.3.5的传送带和需要全宽的背景图像。我已经在背景图像上设置了最小高度，以便显示完整图像。但是幻灯片的左右边缘有一段距离，我似乎无法摆脱。Bootstrap传送带全宽问题

我的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重要;填充：0！重要}但它不会删除每边的边距。

来源

2015-10-15 Alex Zahir

Bootstrap在传送带上有默认填充。

#myCarousel{ 
    padding: 0px; 
}

请注意，在移动设备上，你可能真的想是为了防止您的字幕从去到设备上的屏幕的边缘。您可以通过只在更大屏幕上移除填充做到这一点：

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

来源

2015-10-15 12:30:36 plushyObject

的作品。因为这是第一个答案，我会在7分钟内接受这个（在等待时间之后） –

谢谢亚历克斯度过了愉快的一天。几乎星期五！ – plushyObject

似乎工作的很好：

.banner{ 
    padding: 0; 
}

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

来源

2015-10-15 12:30:59 AlexG

Bootstrap传送带全宽问题

回答

相关问题