具有".container-like"布局的Bootstrap .container-fluid

Question

我有一个用于布局的Bootstrap网站,在我的网站CSS中.container有一个额外的CSS属性.container:

.container {
    width: 1170px;
}

我现在正试图移动到.container-fluid布局,所以我可以在我的div中使用全屏幕背景图像,但同时我仍然需要我的div的实际内容才能有类似.container的布局.到目前为止,我试图在a .container中嵌套,.container-fluid但这似乎不是最好的解决方案,也不是一个好的做法.

任何指导将不胜感激.

Answer 1

我最近想这样做，但我发现一些解决方案比需要的更复杂。我所做的几乎正是u\xca\x8dop\xc7\x9dp\xc4\xb1sdn在你的问题的评论中已经建议的，即包装.container在div.

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

该解决方案显然需要您重新构建HTML每个.container部分一个而不是每个.container一个body，我发现这工作得很好。

\n