Question

我无法弄清楚为什么我无法摆脱旋转木马上的白边。我想让旋转木马的图片从左到右填满整个空间。

你能告诉我如何纠正我的代码吗？

 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>

Answer 1

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

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

<强> Demo

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

Answer 2

您的最后一个图片项后有一个额外的结束标记。您应该使用本帖中提到的所有其他方面，使用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-->

Answer 3

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

Bootstrap完整轮播不需要的边距

3 个答案: