Bootstrap 3在容器中添加容器-流体？

Question

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

<div class="container">

<div class="container-fluid">

</div>

</div>

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

Answer 1

您不能在.container中使用.container-fluid来实现您想要实现的目标。看看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>

在需要使用Bootstrap Grid的任何地方，在整个站点中使用多个容器是完全可以接受的。

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

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