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

【问题标题】：Bootstrap 3 Adding a container-fluid inside a container?Bootstrap 3 在容器内添加容器流体？
【发布时间】：2019-07-28 12:02:44
【问题描述】：

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

<div class="container">

<div class="container-fluid">

</div>

</div>

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

【问题讨论】：

也可以使用网格系统。使用 class="col-xs-12" 这将在任何尺寸的设备上在页面上拉伸一个 div。
@MortHub 发布的任何内容都不会全宽我真的不知道为什么会这样。我需要一个全屏的容器，但它不工作。它停留在中间的 Container 内！
您要覆盖容器的宽度还是容器流体的宽度？不要完全遵循你想要达到的目标。
@WosleyAlarico 我需要一个全宽的容器，但它不会全宽，我猜它会留在另一个容器内。
是否有任何具体原因需要容器流体然后覆盖宽度？如果没有，那么您应该删除 container-fluid 类。

标签： html css twitter-bootstrap

【解决方案1】：

.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 使用桌面。

【讨论】：

【解决方案2】：

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

你需要使用.container-fluid定宽容器的OUTSIDE。

一个例子如下：

<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>

在整个站点中拥有多个容器是完全可以接受的，只要您需要使用 Bootstrap Grid。

【讨论】：

没错，但他们是否可以覆盖以下内容，因为我需要一个全宽容器。
你可以同时使用它们；只是没有嵌入彼此。在您需要使用.container-fluid 的地方结束您的.container。
这有点不可能。因为“.container”在网站正文的末尾结束，如果我在它变得一团糟之前结束它。
我已经更新了我的答案，为您提供了一个使用多个容器的示例。听起来您的结构只需要更新以更好地响应您的设计。
是的，这真是个好主意。我的问题在 wordpress 上，我需要所有页面都在容器中，只有一些帖子我需要容器流体。 ://

【解决方案3】：

尝试添加row 而不是container-fluid。

<style>
.container { background: #ccc;}
.fullwidth { background: #000;}
</style>    
<div class="fullwidth">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>content</p>
        </div>
      </div>
    </div>
  </div>

【讨论】：

Row 也不起作用.. 它肯定是全宽的，但我不知道出了什么问题，屏幕上没有全宽。
容器是全宽的，所以即使你添加了 col-md-12，它也会保持在这个容器的固定宽度内。

【解决方案4】：

您的 .container-fluid 没有最大宽度并且可以在一个完整的视角伸展。为了得到你想要的结果， .container-fluid 必须在 .container 之前

【讨论】：