html - Bootstrap .container-fluid 布局为 ".container-like"

Question

我有一个 Bootstrap 网站，使用 .container 构建布局，并为 .container 添加一个 CSS 属性> 在我的网站 CSS 中:

.container {
    width: 1170px;
}

我现在正尝试移动到 .container-fluid 布局，这样我就可以在我的 div 中拥有全屏背景图像，但同时我仍然需要我的实际内容div 具有类似 .container 的布局。到目前为止，我已经尝试将 .container 嵌套在 .container-fluid 中，但这似乎不是最佳解决方案或最佳实践。

任何指导将不胜感激。

Answer 1

我最近想这样做，但我发现的一些解决方案比需要的更复杂。我所做的几乎就是 uʍopǝpısdn已经在您的问题的评论中提出建议，即将 .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 而不是每个 body 使用一个 .container ，我发现它工作得很好。