html - Roots Wordpress 中的规避容器

Question

我有一个 Wordpress 页面，它使用基于 Twitter Bootstrap 的 roots startertheme。为了好看，这个主题中的所有内容都放在一个容器下，但我有一个 div，我想在宽度上拉伸(stretch) 100%。我试图添加一个我指定 width: 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类。

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

但是，默认情况下，Bootstrap 将左右填充应用于 container 类。因此，如果您试图覆盖它，那么您将创建:

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

您可能还需要添加 !important 标签。

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

如果您需要进一步说明，请告诉我。