为什么在视口外显示100％宽度？

Question

在this page上，我有一个6个方框：

• 我们是谁
• 我们在哪里
• 我们做什么
• 我们如何做到
• 我们为什么这样做
• 案例研究

当我们将视口减小到比1160px窄时，这个区域的宽度保持在1160px。

我有以下CSS：

.bouble_shaded_bg_full-width.vc_col-sm-12 {
    float: none;
    width: 100%;
}
@media only screen and (min-width: 1160px) {
    .bouble_shaded_bg_full-width.vc_col-sm-12 {
        float: none;
        width: 100vw;
        left:50%;
        margin-left:-50vw;
    }   
}

为什么width: 100%;未在视口1160px下面被尊重？

Answer 1

您的问题来自display: table;

上的.bouble_shaded_bg_full-width

要解决此问题，请使用以下命令：

@media only screen and (min-width: 1160px) {
    .bouble_shaded_bg_full-width.vc_col-sm-12 {
        float: none;
        width: 100vw;
        display: block;
    }   
}

Answer 2

如果你在网上看到没有。 42.固定width:1140px;。这是造成问题的原因。您可以使用max-width重新发布。

.bouble_shaded_bg_full-width.vc_column_container > .vc_column-inner{
    width: 1140px;
}

到

.bouble_shaded_bg_full-width.vc_column_container > .vc_column-inner{
     max-width: 1140px;
 }

或

@media only screen and (min-width: 1160px) {
  .bouble_shaded_bg_full-width.vc_column_container > .vc_column-inner{
     width: 100%;
  }
}

也在线号。 73 .site-inner, .content-sidebar-wrap已修复width:1160。由于.site-container overflow:hodden，它也不会显示水平滚动。您可以通过媒体查询来实现最大宽度或控制。

*, *:before, *:after {
   box-sizing: inherit;
}

此属性为inherit，表示您必须定义框大小：border-box＆＃39;当你使用填充。在bootstrap中，他们只需将box-sizing: border-box应用于所有内容。 （＆＃39; box-sizing＆＃39;只是观察而不是问题。）