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

Question

因为这个 question 已经过时了，我的问题是如何在非流体容器中创建一个 fluid row。

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

这是我的 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，请增加输出 window 宽度以便您可以看到差异。

提前致谢

Answer 1

要么使用合适的布局或者使用以下

获得相同的效果

<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-index 发挥相同的效果，但不能使用它的祖父

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

我不确定是否完全理解您的问题，但是您不能只使用 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>

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

Bootstrap fluid-container within non-fluid container

html

css

fluid-layout

twitter-bootstrap