如何创建一个偏离中心的响应背景？

Question

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

对于内页，它分为2个不相等的列[7cols＆amp; 5cols]左栏需要白色背景＆amp;左边需要浅灰色背景。无论大小如何，两个背景都需要扩展到浏览器视口的边缘。这是一个不起作用的例子：http://dev.randallelectric.ca/

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

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

Answer 1

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

在bootstrap.min.css

中

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

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

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

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

Answer 2

尝试改为使用.col-xs-7和.col-xs-5。