Question

我有一个普通的容器，在这个容器里面我想添加一个全宽容器流体，这样容器就是我的屏幕上的Full View Point。我尝试过这个，但它没有全宽。

<div class="container">

<div class="container-fluid">

</div>

</div>

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

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

Answer 2

您无法在.container-fluid内使用.container并获得您想要实现的目标。查看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。

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>

Answer 4

您的.container-fluid是没有最大宽度并且可以在完整视点下拉伸的流体。为了获得想要的结果，.container-fluid必须先于.container

Bootstrap 3在容器内添加容器液？

4 个答案: