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

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这等于最终用户的桌面宽度.这会覆盖,%因为a %是父项的百分比,vh使用桌面.

Answer 2

您无法.container-fluid在 a 内部使用.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>

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