我有以下使用bootstrap的模板:
我将1200px的容器用于蓝色/灰色容器,图像为1600px。
我想用蓝色填充蓝色容器(400px)的左侧,用灰色填充灰色容器(800px)的右侧,但是填充物不能超过1600px。基本上,它必须与2个容器上方的图片匹配。
这是我想要实现的目标:
内容必须保持在1200像素以内,但背景颜色必须填充为1600像素。
如果我将模板的大小调整为1200ish像素,则它应如下图所示。
你们知道我如何实现吗?我尝试解决的每个解决方案都涉及放弃引导容器,并且在调整大小时内容不合时宜,这是我要避免的事情。
谢谢!
编辑:如果需要,这是一个引导示例:http://www.bootply.com/APwOkhCfQD
您当前的问题是图像被硬编码为1600px
宽度。您有两个选择:
使标头在宽度上完全流畅,并去除当前正在进行的双container
换行:
<div class="container-fluid">
<div class="container"><!-- delete this -->
或将container
类的宽度更改为1600
:
.container {
width: 1600px;
}
http://www.bootply.com/q35ERYfN7A
更新:
您还可以通过以下方式获得完整的背景颜色效果:
.blue-background, .light-gray-background{height: 100vh;}
body{background: linear-gradient(90deg, #004a87 50%, #f2f1eb 50%);}
在.service-container和.commitment-container上使用伪类。绝对放置它们,并将它们的大小设置为200px宽和100%高度。添加背景色,瞧!
示例:
.service-container::before {
content: "";
background-color: blue;
width: 200px;
height: 100%;
position: absolute;
top: 0;
right: 0;
}
我之前回答过very similar question。
将蓝色背景色放在container
的外部包装上,并添加伪元素到浅灰色背景的右侧。
.light-gray-background:before {
right: -999em;
background: #f2f1eb;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}