html - 为什么 Bootstrap 轮播会自动在其左侧和右侧留出边距？

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;左内边距:15px；所以你需要创建一个新类来通过设置 padding-right: 0; 来覆盖左填充:0；

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

.header {padding-right: 0;左填充:0;}