css - 如何创建偏离中心的响应式背景？

Question

我正在尝试使用具有一些奇怪背景的引导程序创建布局。

对于内页，它分为 2 个不相等的列 [7cols 和 5cols]，左列需要白色背景，左列需要浅灰色背景。无论大小如何，两个背景都需要延伸到浏览器视口的边缘。这是一个无效的示例：http ://dev.randallelectric.ca/

当您开始调整浏览器窗口的大小时，问题变得非常明显 - 右侧的列背景应该出现以保持它在文本后面的位置。

我不确定如何正确处理这个问题。有什么想法吗？

Answer 1

我认为问题的发生是因为：

在 bootstrap.min.css

@media (min-width: 768px)
.col-sm-7 {
width: 58.333333333333336%;
}

如果您的宽度小于 768 像素，则宽度将从 .col-sm-7 中删除

您可以这样做以获得 768 像素以下的全宽白色背景，否则将是您当前的背景：

@media (max-width: 768px) {
div.content {
background: #ffffff;
}
}

Answer 2

尝试使用.col-xs-7and.col-xs-5代替。