为什么bootstrap carousel会自动在左侧和右侧拍摄边距？

Question

我正在尝试制作全屏旋转木马。这意味着我需要100％宽的旋转木马。但它在左右两侧留下了一些地方。其他元素工作正常。这是图像：

我的代码是：

 <div class="container-fluid">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="images/slide-1.jpg" alt="" />
            </div>
            <div class="item">
                <img src="images/slide-2.jpg" alt="" />
            </div>
            <div class="item">
                <img src="images/slide-3.jpg" alt="" />
            </div>
        </div>
    </div>
<div style="width: 100%; height: 300px; background: #990000;">&nbsp;</div>
</div>

如何删除这些不需要的边距？

Answer 1

这是因为.container已经有padding-right：15px; padding-left：15px;所以你需要创建一个新的类来覆盖padding-right：0; padding-left：0;

<div class="container-fluid header">
...
</div>

.header {padding-right: 0; padding-left: 0;}

Answer 2

尝试以下

 <style>
      .carousel-inner > .item > img,
      .carousel-inner > .item > a > img {

          margin: 0 auto;
      }
      </style>

否则试试这个

.carousel .item {
    width: 100%; /*slider width*/
    max-height: 400px; /*slider height*/
}
.carousel .item img {
    width: 100%; /*img width*/
}
@media (max-width: 767px) {
    .block {
        margin-left: -20px;
        margin-right: -20px;
    }
}