Bootstrap容器用颜色填充侧面

问题描述 投票:2回答:3

我有以下使用bootstrap的模板:

![1600px](http://imgur.com/a/PjIH6)

我将1200px的容器用于蓝色/灰色容器,图像为1600px。

我想用蓝色填充蓝色容器(400px)的左侧,用灰色填充灰色容器(800px)的右侧,但是填充物不能超过1600px。基本上,它必须与2个容器上方的图片匹配。

这是我想要实现的目标:

enter image description here

内容必须保持在1200像素以内,但背景颜色必须填充为1600像素。

如果我将模板的大小调整为1200ish像素,则它应如下图所示。

enter image description here你们知道我如何实现吗?我尝试解决的每个解决方案都涉及放弃引导容器,并且在调整大小时内容不合时宜,这是我要避免的事情。

谢谢!

编辑:如果需要,这是一个引导示例:http://www.bootply.com/APwOkhCfQD

css twitter-bootstrap
3个回答
2
投票

您当前的问题是图像被硬编码为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%);}

1
投票

在.service-container和.commitment-container上使用伪类。绝对放置它们,并将它们的大小设置为200px宽和100%高度。添加背景色,瞧!

示例:

.service-container::before {
  content: "";
  background-color: blue;
  width: 200px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
}

1
投票

我之前回答过very similar question

将蓝色背景色放在container的外部包装上,并添加伪元素到浅灰色背景的右侧。

.light-gray-background:before {
    right: -999em;
    background: #f2f1eb;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

演示:http://www.codeply.com/go/Cdnjz5CH5M

© www.soinside.com 2019 - 2024. All rights reserved.