html - 非流体容器内的 Bootstrap 流体容器

Question

自此question已过时 我的问题是如何在非流体容器中创建流体行。

我想要一个非流体容器作为我的默认布局，但是我放置的 map ，我需要它是全宽非流体的。

这是我的 html:

<div class="container">
    <div class="row-fluid">
        <div id="map-canvas" class="container-fluid"></div>
    </div>
</div>

row-fluid 不适用于 bootstrap 3，设置 width: 100%; 仅采用其父级(非流体容器)的宽度。

JS Fiddle , 请增加输出窗口宽度以便您可以看到差异。

提前致谢

Answer 1

试试下面的代码。您可以在固定布局内制作一个 100% 宽度的容器。

http://jsfiddle.net/m1L6pfwm/2/

HTML

 <div class="row row-full"> content... </>

CSS

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