非流體容器內的自舉流體容器

由於此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/ –

非流體容器內的自舉流體容器

回答

相關問題