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

【问题标题】：Bootstrap fluid-container within non-fluid container非流体容器内的引导流体容器
【发布时间】：2015-05-31 19:39:38
【问题描述】：

由于这个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，请增加输出窗口宽度，以便您看到差异。

提前致谢

【问题讨论】：

只是一个需要澄清的快速问题；你是说“流体”吗？
哎呀是的，抱歉错字，一个一致的错字...
@odedta jsfiddle.net/m1L6pfwm 附加...
这基本上会破坏 Bootstrap 标记和推理......关于拥有非流动父母的整个帖子就是这样，你正试图打破它......如果你真的需要这样做只需使用position:fixed;width: 100% !important;。说真的，您正在尝试创建错误的标记！使用好的 HTML 标记来实现您喜欢的，如果您不能直接更改 HTML，请使用 jQuery。
谢谢你这样做:)

标签： html css twitter-bootstrap fluid-layout

【解决方案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%;
}

【讨论】：

它可以按我的意愿完美运行，但我不明白为什么要放置 margin-left 和 left 属性？更重要的是，为什么没有这两个属性它就不能工作？稍微解释一下就好了。谢谢。
我们需要这两个属性才能使其居中对齐。以下是视觉解释。 postimg.org/image/dry5m6fzt

【解决方案2】：

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

【讨论】：

感谢您的帮助。我想要一个容器而不是混合物，否则你的建议就是达到我的结果。

【解决方案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-index 播放相同的效果，但不能使用它的祖父

【讨论】：

你说得对，这就是我想要的。解决方案是我必须使用不同的容器，但我想要一个更合适的解决方案，然后将我的布局分成多个容器