Bootstrap 完整轮播不需要的边距答案

【问题标题】：Bootstrap full carousel unwanted marginsBootstrap 完整轮播不需要的边距
【发布时间】：2015-07-14 14:11:19
【问题描述】：

我不知道为什么我无法消除轮播上的白边。我想让轮播的图片从左到右填满整个空间。

您能告诉我如何更正我的代码吗？

 body {
   padding: 0;
   margin: 0;
   overflow-y: scroll;
   font-family: arial;
   font-size: 18px;
 }
 .carousel .item {
   width: 100%;
   /*slider width */
 }
 .carousel .item img {
   width: 100%;
   /*img width*/
 }
 .container {
   width: 100%;
 }

  <div class="container">
    <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>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        <div class="item active">
          <img id="beach" src="images/beach.jpg">
        </div>

        <div class="item">
          <img src="images/mountain.jpg">
        </div>

        <div class="item">
          <img src="images/island.jpg">
        </div>

      </div>

    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

【问题讨论】：

这是完整的代码还是您将其包装在任何其他元素中？

标签： twitter-bootstrap carousel

【解决方案1】：

确保您正确使用了 Bootstrap 的网格。具有一行且没有列的容器将留下零填充。

<div class="container-fluid">
    <div class="row">
        <div class="carousel-inner">

Demo

您的浏览器的文档检查器会快速向您显示哪些元素会导致此类问题。

【讨论】：

确保您使用的是container-fluid 而不是container。

【解决方案2】：

我对您使用的这个示例代码有同样的问题，答案在于它附带的 javascript，它设置为全屏高度。如果您使用的是横幅图像，则会出现较大的边距。

【讨论】：

【解决方案3】：

在最后一个图像项之后有一个额外的结束标记。您应该使用本文中已经提到的其他方面，使用container（或container-fluid）、row 然后carousel 作为您的层次结构。

  <div class="item">
     <img src="images/island.jpg">
  </div>
</div> <!--/INNER CAROUSEL CLOSE-->
</div> <!--REMOVE ME! IM ONE TOO MANY-->

【讨论】：