Html Bootstrap.container fluid with"；。“集装箱式”；布局

我有一个

Bootstrap

网站，使用

.container

构建布局，并在我的网站CSS中为

.container

添加了一个

CSS

属性：

.container {
    width: 1170px;
}

我现在正尝试移动到

.container fluid

布局，这样我的div中就可以有全屏背景图像，但与此同时，我仍然需要div的实际内容来有一个类似

.container

的布局。到目前为止，我尝试将

.container

嵌套在

.container fluid

中，但这似乎不是最好的解决方案，也不是很好的做法

任何指导都将不胜感激。

<div class="container-fluid">
   <div class="wrap">
    <div class="container">
      <div class="row">
        here u can use span or u can provide the style property
      </div>
    </div>
  </div>
</div>

在这里，您可以使用span，也可以提供style属性

---

我认为这会对你有所帮助：）

我最近想这样做，但我发现有些解决方案比需要的更复杂。我所做的与你的问题的评论中所建议的差不多，即将

.container

包装在

div

中

我为我需要着色的每个部分创建了一些颜色样式：

.bg-black {
    background-color: #111;
}
//add more colors, even background images in a similar manner

并将这些样式用作每个包装的类

div

：

<div class="bg-black">
    <div class="container">
        //content here
    </div>
</div>
<div class="bg-red">
    <div class="container">
        //other content here
    </div>
</div>
//...and so on

//满足于此
//这里还有其他内容
//……等等

---

这个解决方案显然需要您重新构造

HTML

，以便在每个节中使用一个

.container

，而不是在每个

正文中使用一个
.container
，我发现这一点非常有效。
为什么不将
.container
包装在一个div中呢？这将自然具有100%的宽度，并且对内的
.container
s没有影响-示例似乎有效。如果你希望每个部分有不同的“背景”呢？您是否需要为每个背景（例如）创建一个
容器
？我的身体总共有一个容器，之后我使用
.row
divs分割身体，这就是我设想的身体工作方式。如果你把所有的内容都放在一个容器里，我想这种方法是行不通的，你会把自己弄糊涂的。只要用任何DIV包装容器，就可以100%使用bg img。