在Bootstrap中爲頁面的1/3設置背景顏色4

我想在Boostrap 4（alpha 5）中進行設計，並使屏幕的三分之一具有粉紅色背景色。背景顏色應該從我右列的左邊界一直延伸到右邊界。結果應該是有點像：在Bootstrap中爲頁面的1/3設置背景顏色4

沒有任何人有這樣做的最好方法任何recommandations？

2016-11-14 Ole Kristian Losvik

需要用線性漸變發揮和媒體查詢 – tmg

您可以在背景上使用div，寬度由vw設置，即viewport width。

例如：

.background{ 
    z-index: -1; // prevent "background" from covering anything 
    width: 33vw; //give background width of one third of page 
    height: 100%; 
    position: fixed; /* or absolute? I don't know what will be better for you */ 
    right: 0; /* stick to the right side */ 
    background-color: pink; 
}

來源

2016-11-14 22:48:30

感謝您的建議。它有點朝着正確的方向發展（至少在絕對位置），但是它會讓人頭疼，並且在小屏幕上縮小時看起來不太好。 –

爲什麼它看起來不好？無論屏幕大小如何，屏幕寬度總是應該爲33％。 ''''''''''''''''''''''我有小錯字，'33'後應該沒有空格 –

如果你的背景爲這個使用梯度？看到這個例子：

body { 
 
    background: linear-gradient(
 
    to right, 
 
    lightgrey 0%, 
 
    lightgrey 70%, 
 
    hotpink 70%, 
 
    hotpink 100% 
 
); 
 
}

your code

來源

2016-11-14 23:02:05

雖然這可能有效，但我正在考慮使用引導類進行佈局。 –

我提取了需要的部分。 –

這裏的問題是在較小的屏幕上，然後背景仍然在屏幕的三分之一處變成粉紅色，所以即使在md和更大的尺寸上正常工作，它也無法在小型手機屏幕上按預期工作。也許我需要一個媒體查詢？ –

在Bootstrap中爲頁面的1/3設置背景顏色4

回答

相關問題