爲什麼100％寬度顯示在視口之外？

我們是誰
我們在哪裏
我們做什麼
我們如何做
我們爲什麼做
案例研究

當我們將視口縮小到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; 
    } 
}

爲什麼沒有得到尊重低於視口1160px的width: 100%;？

來源

2017-02-20 Steve

很難說沒有更多的上下文，但我敢打賭，容器內有東西沒有收縮，因此父容器保持同樣大的尺寸。 –

你的問題來自於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; 
    } 
}

來源

2017-02-20 06:01:07

非常好，謝謝你Cyrille。 – Steve

非常歡迎您！ –

如果你在網上看不到。 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-containeroverflow:hodden。您可以通過媒體查詢來實現最大寬度或控制。

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

此屬性是inherit這意味着你必須定義「箱尺寸：邊界盒」當您使用填充。在bootstrap中，他們只需將box-sizing: border-box應用於一切。（'box-sizing'只是一個觀察不是問題。）

來源

2017-02-20 06:29:29 locateganesh

爲什麼100％寬度顯示在視口之外？

回答

相關問題