非流体容器内的自举流体容器

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

在此先感谢

来源

2015-05-31 ɢʜʘʂʈ ʀɛɔʘɴ

只是一个简单的问题，以澄清;你的意思是'流畅'吗？ –

哎呀是的，抱歉，错别字，一致的错字... –

jsfiddle请！ – odedta

我不知道，一个完全明白你的问题，但你不能只用引导的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>

来源

2015-05-31 11:39:38 ZimSystem

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

要么使用apropriate布局或使用得到同样的效果如下

<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-指数起到同样的效果，但不是与它的盛大母公司

来源

2015-05-31 11:08:12

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

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

来源

2015-05-31 11:31:06

它完美的作品，因为我想要的，但我不明白为什么把'边缘左'和'左'属性？更重要的是为什么没有这两个属性它就无法工作？有点解释会很好。谢谢。 –

只是一个参考：'vw'是'viewport width'单位。 – odedta

我们需要两个属性才能使其居中对齐。以下是视觉解释。 http://postimg.org/image/dry5m6fzt/ –

非流体容器内的自举流体容器

回答

相关问题