在Bootstrap中为页面的1/3设置背景颜色4

问题描述：

我想在Boostrap 4（alpha 5）中进行设计，并使屏幕的三分之一具有粉红色背景色。背景颜色应该从我右列的左边界一直延伸到右边界。结果应该是有点像：在Bootstrap中为页面的1/3设置背景颜色4

没有任何人有这样做的最好方法任何recommandations？

需要用线性渐变发挥和媒体查询 – 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; 
}

感谢您的建议。它有点朝着正确的方向发展（至少在绝对位置），但是它会让人头疼，并且在小屏幕上缩小时看起来不太好。 –

为什么它看起来不好？无论屏幕大小如何，屏幕宽度总是应该为33％。 ''''''''''''''''''''''我有小错字，'33'后应该没有空格 –

答

如果你的背景为这个使用梯度？看到这个例子：

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

your code

虽然这可能有效，但我正在考虑使用引导类进行布局。 –

我提取了需要的部分。 –

这里的问题是在较小的屏幕上，然后背景仍然在屏幕的三分之一处变成粉红色，所以即使在md和更大的尺寸上正常工作，它也无法在小型手机屏幕上按预期工作。也许我需要一个媒体查询？ –

在Bootstrap中为页面的1/3设置背景颜色4

相关推荐