Question

我有一个Wordpress页面，它使用基于Twitter Bootstrap的roots startertheme。这个主题中的所有东西都放在一个容器下面以获得美观，但我有一个div，我想要伸展100％的宽度。我试图添加一个类，我在其中指定宽度：100％以绕过容器，但这不起作用。

容器使用填充来居中div，所以我尝试在这个div中添加填充到0px，但这也没有用。

有没有办法绕过这个div的容器？

感谢。

.div1{
position: relative;
top: -20px;
width: 100%;
background-color: @redColor;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
}

.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

Answer 1

正确的方法是添加官方的Bootstrap no-gutters类。

如果由于某种原因您不能这样做，那么，如果您可以控制父容器样式，则可以通过逐行删除行来删除填充。

然而，自举，默认情况下，适用左右填充于container类。因此，如果您尝试覆盖它，则可以创建：

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

您可能还需要加入!important标记。

如果无法修改HTML或父类，则还可以将子div设置为固定宽度，即容器宽度+填充。因此，如果父容器在桌面上的宽度为980像素，并且其左右填充为15像素，则您将使子容器的宽度为1010像素，左边距为负15。然后，为了使其响应，请添加{{3} }用于每个尺寸，并相应地改变它。

让我知道是否需要进一步说明。

在根Wordpress的容量容器

1 个答案: