如何删除 Bootstrap Carousel 中的空格？

Question

我对 Bootstrap Carousel 有疑问 - 我希望它从边到边的宽度为 100%，但我无法摆脱左右两侧的小空白（边距？）。我已经尝试了一切：边框、边距、填充、不同代码公园中的轮廓（图像、div、bootstrap.css）——没有任何帮助。有什么线索吗？ Here's what I'm talking about.

这是我的代码的一部分：

<div class="container" style="width: 100%;">
  <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="">
    <!-- 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>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox" style="margin: 0px; padding: 0px; border: 0px; margin: none; ">
      <div class="item active">
        <img src="img/back_1.JPG" alt="Chania" style="min-width:100%; margin: none; padding: none;">
      </div>

      <div class="item">
        <img src="img/back_2.jpg" alt="Chania" style="width:100%;">
      </div>

      <div class="item">
        <img src="img/back_3.jpg" alt="Flower" style="width:100%;" >
      </div>

      <div class="item">
        <img src="img/back_4.jpg" alt="Flower" style="width:100%;">
      </div>
    </div>
  </div>
</div>

Answer 1

轮播两侧的空白区域来自container 类，它添加了padding-left: 15px 和padding-right: 15px。虽然您可以覆盖它，但从您的主要 .container <div> 元素中删除该类会更有意义。

另外，请注意<div> 元素默认为100%，因此您实际上并不需要这个外部<div> 容器all；您可以简单地使用<div id="myCarousel"> 启动轮播，如下例所示：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000" style="">
  <!-- 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>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox" style="margin: 0px; padding: 0px; border: 0px; margin: none; ">
    <div class="item active">
      <img src="http://placehold.it/100" alt="Chania" style="min-width:100%; margin: none; padding: none;">
    </div>
    <div class="item">
      <img src="http://placehold.it/100" alt="Chania" style="width:100%;">
    </div>
    <div class="item">
      <img src="http://placehold.it/100" alt="Flower" style="width:100%;">
    </div>
    <div class="item">
      <img src="http://placehold.it/100" alt="Flower" style="width:100%;">
    </div>
  </div>
</div>

希望这会有所帮助！ :)

Answer 2

这里有同样的问题，但上面的代码解决方案对我不起作用...当我删除列（使用引导程序 4.4）时，当我最大化我的窗口时，我的小图像没有全屏显示。解决方案是在这里添加一个名为 .nomargin 的 css 类，其中边距和填充设置为 0。 我在 col-12 课后添加了这门课。所以我的代码如下所示：

     <!-- Header Carousel -->
      <header class="container-fluid">
          <div class="row">
          <div class="col-12 nomargin">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                    <img src="img/pictures/_MG_9515_web.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                    <img src="img/pictures/_MG_9629_web.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                    
                        <iframe class="embed-responsive" src="https://www.kijkrond.in/stationroeselare/" alt="..." >
                        </iframe>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
          </div>
        </div>
      </header>