非流体容器内的引导流体容器

Question

由于这个问题已经过时，我的问题是如何在非流体容器中创建fluid row。

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

这是我的html：

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

row-fluid不使用引导程序3，设置width: 100%;只获取其父容器(非流体容器)的宽度。

JS Fiddle，请增加输出窗口的宽度，这样您就可以看到差异。

提前感谢

Answer 1

我不确定一个人是否完全理解你的问题，但你就不能用Bootstrap的container-fluid来包含row地图吗？

http://bootply.com/KP9j6dKCES

<div class="container-fluid">
    <div class="row" style="height:100px; background: #f00;">
        this should take 100% width
    </div>
</div>

Answer 2

试试下面的代码。您可以在固定布局内制作一个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%;
}

Answer 3

要么使用适当的布局，要么使用以下方法获得相同的效果

<div class="row-fluid" style="position:absolute;z-index:5">
        <div id="map-canvas" class="container-fluid"></div>
</div>

<div class="container" style="z-index:0">
    <--fluid with respect to first static/relative parent-->
    <div class="row-fluid">
        <div id="map-canvas" class="container-fluid"></div>
    </div>
</div>

您可以使用Z索引发挥相同的效果，但不能使用它的父级