引导容器用颜色填充侧面 [英] Bootstrap container fill sides with colors

问题描述

我使用引导程序使用以下模板：

内容必须保持在1200px以内，但背景色必须填充为1600px。

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

你们知道我如何实现这一目标吗？我尝试解决的每个解决方案都是抛弃引导容器，当我调整大小时，内容会脱节，这是我要避免的事情。

谢谢！！

p>

编辑：如果需要，这是一个bootply示例： http：/ /www.bootply.com/APwOkhCfQD

解决方案

您当前的问题是图像被硬编码为 1600px 宽度。您有两种选择：

使标头的宽度完全流畅，并移除当前使用的双容器包装：

 < div class = container-fluid> 
< div class = 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％）;} 
  

I have the following template using bootstrap :

I'm using a 1200px container for the blue/gray container and the image is 1600px.

I would like to fill the left side of the blue container (400px) with blue and the right side of the gray container (800px) with gray, but the fillers can't go over 1600px. Basically it has to match with the picture above the 2 containers.

Here is what I would like to achieve:

the content has to stay within 1200px, but the background colors must be filled to 1600px.

If I resize the template to 1200ish pixels, it should look like the following picture.

Do you guys have an idea how I could achieve that? Every solution I tried resolve around ditching the bootstrap container and the content get out of line when i resize, which is something I would like to avoid.

Thank you!

EDIT: Here is a bootply example if needed: http://www.bootply.com/APwOkhCfQD

解决方案

Your current problem is that the image is hardcoded to 1600px width. You have two options:

Make your header completely fluid in width and remove double container wrap you currently have going on:

<div class="container-fluid">
    <div class="container"><!-- delete this -->

Or change the container class width to 1600:

.container {
    width: 1600px;
}

http://www.bootply.com/q35ERYfN7A

Update:

You can also achive the full background color effect via:

.blue-background, .light-gray-background{height: 100vh;}
body{background: linear-gradient(90deg, #004a87 50%, #f2f1eb 50%);}

这篇关于引导容器用颜色填充侧面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！