Bootstrap 3 在容器内添加容器流体？

Question

我有一个普通容器，在这个容器内我想添加一个全宽容器流体，这样容器就可以在我的屏幕上显示全视点。我试过了，但它不是全宽的。

 <div class="container">

<div class="container-fluid">

</div>

</div>

根据我的说法，容器流体是整个容器而不是屏幕的全宽。有什么办法可以覆盖它吗？

原文由 The Little Cousin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您不能在 .container-fluid 中使用 .container 并获得您想要实现的目标。查看Bootstrap的 .container 类的代码；它有一个固定的宽度。

您需要在固定宽度容器的外部使用 .container-fluid 。

一个例子如下：

 <div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>Some Content</p>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <p>Item 1</p>
        </div>

        <div class="col-md-4">
            <p>Item 2</p>
        </div>

        <div class="col-md-4">
            <p>Item 3</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>Some More Content</p>
        </div>
    </div>
</div>

在整个站点中使用多个容器是完全可以接受的，无论您需要在何处使用引导网格。

原文由 Robert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

 .full-width {
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}

 <div class="container">
  <div class="container-fluid full-width">
  </div>
</div>

这是有效的，因为您使用的是 vw - vertical-width 等于最终用户的桌面宽度。这会覆盖 % 因为 % 是父级的百分比， vh 使用桌面。

原文由 Amine99 发布，翻译遵循 CC BY-SA 4.0 许可协议