如何使Bootstrap设计的HTML颜色边缘到边缘

Question

我对HTML，CSS和Bootstrap非常了解。如果任何术语出错，请原谅我。

这是页面：http://jowoco.com/stackoverflow/scheduletech.html

在大型显示器（分辨率> 1500px）或缩小屏幕（ctrl / cmnd +“ - ”）上，您将看到颜色停止。理想情况下，角度会继续，但至少将颜色作为实体继续显示在屏幕左侧和右侧（参见模拟）会很不错。

我附上了我认为可能作为修复工作的屏幕截图（不确定它是否为div或span），但不确定如何在实际操作中执行此操作。

非常感谢您的帮助和时间， Wojo

Answer 1

有几种方法可以做到这一点......但到目前为止最简单的方法是为页面创建线性渐变背景，而不是直白色。

即使页面的主体停止，这也允许栏从边缘到边缘。

不幸的是，你还没有给我足够的信息来简单地为你提供代码：

1. 蓝色条纹的角度是多少？
2. 在调整浏览器窗口大小时，页面的几何图形是否会发生变化？具体来说，蓝色横幅是否会移动？
3. 您需要支持哪些浏览器？

如果你有这些问题的答案，请随时将它们放在这里，我会更新这个答案。

如果您希望自己对代码进行破解，可以生成Colorzilla。生成的代码如下所示：

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(45deg,  #ffffff 50%, #91b5b5 50%, #91b5b5 71%, #ffffff 71%); /* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(50%,#ffffff), color-stop(50%,#91b5b5), color-stop(71%,#91b5b5), color-stop(71%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg,  #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg,  #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* Opera 11.10+ */
background: -ms-linear-gradient(45deg,  #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* IE10+ */
background: linear-gradient(45deg,  #ffffff 50%,#91b5b5 50%,#91b5b5 71%,#ffffff 71%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

此代码涵盖Firefox，早期版本和更新版Chrome之间的所有浏览器，甚至涵盖IE 6-9。

代码通常看起来比它更糟糕......对于大部分代码，你可以直接设置蓝条应该出现的角度;例外是IE6-9和早期版本的Chrome。

早期版本的Chrome可能几乎不存在，因为Chrome通常会自动更新...但早期的Internet Explorer一如既往可能会出现问题。