2016-12-26 110 views
0

具有引導,2列到非流體容器引導.container流體與內列固定

.col-xs-9/.col-xs-3 

我怎樣才能使這個欄目的背景是全寬左,右頁邊距?
我做了這個例子 404:http://codepen.io/iamandrewluca/pen/VmOJVJ
但是width: 75vw;width: 25vw;不工作,因爲我假設。
我該如何解決這個問題?

想要的結果:
*橙色 - 集裝箱
*綠色 - 左欄
*藍 - 右列
*深綠 - 左背景
* darkblue - 合適的背景

result

我可以添加

body { 
    overflow: hidden; 
} 

並給出列width: 100vw;,但背景圖像內容將超出。

+0

是否需要使背景圖像填充整個視口寬度? – Banzay

+0

謝謝,但不是。背景應該從列互相接觸的地方開始。 –

回答

0

用寬度和邊距爲first-of-typelast-of-type的手動使用強化calc解決。
例如:https://codepen.io/iamandrewluca/full/zzWrXe/
也許我會創建一個mixin與偏移,產生本作中的所有列,拉,推,和所有其他的東西

更新:更新來引導4,修復了一些問題,滾動內容

0

您的背景圖像位於具有指定寬度的容器內。你需要使容器的寬度爲100vw,然後左邊的列爲75vw,右邊爲25vw。然後你的背景圖像將覆蓋整個屏幕。

+0

它被稱爲「容器流體」,但他不想使用它 – Banzay

+0

不想使用什麼? – evilgenious448

+0

容器流體。 OP說:'......進入非流體容器' – sol