Question

我正在为我的一个朋友建立这个网站。她问我是否可以制作标题图片的滑块。我试过制作它的全宽，但它在firefox和chrome中看起来不同，我不知道为什么。

网址是xx

问题是在Firefox中它有很多边距/填充，而不是0.尝试添加！重要，但没有区别。铬合金几乎是全宽，但仍然不完全。我想我正在寻找一些明显的东西:(非常感谢帮助。

Answer 1

第一个问题是您只创建了row作为滑块的容器。 row添加margin-left: -25px和margin-right: -25px。如果你想使用这样的结构，你应该在col-xs-12内加col-12（如果你使用Bootstrap 4使用row）。之后，您将看到一个全宽滑块。因此，您的结构将是这样的：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">

            ...
            slider structure
            ...

        </div>
    </div>
</div>

这也可以解决您在Firefox中的问题。

Answer 2

我不确定您是否定义了父元素轮播的宽度 - 示例正确。您可以使用全宽扩展.carousel的bootstrap.css：

.carousel {
  width:100%;
  position:relative;
}

BR

webbolle

css滑块全宽

2 个答案: