如何使用bootstrap將瀏覽器窗口分成兩個策略？

我需要將窗口分割爲height:50%; width:100%:的2個水平方格，是否可以使用引導程序？試過這樣：如何使用bootstrap將瀏覽器窗口分成兩個策略？

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-12" style="border:1px solid red"> 
       1 
     </div> 
     <div class="col-lg-12" style="border:1px solid red"> 
       2 
     </div> 
    </div> 
</div>

enter image description here

隨着綠色匹配的就應該是這樣......

來源

2014-07-24 Kin

只是一個建議計算.row的高度DIV使用JavaScript動態。 CSS height:50%只會在父div被賦予一定高度時才起作用。

EG：.row{ height:500px; }會正常工作。

但是使用jQuery函數$(window).height()來計算這個高度。

來源

2014-07-24 12:18:30 karan3112

假設這是你唯一的標記，你可以給每個父元素的100％的高度：

body,html { 
    height: 100%; 
} 

.container-fluid { 
    height: 100%; 
    } 

    .row { 
    height: 100%; 
    } 

    .col-lg-12 { 
     height: 50%; 
    }

DEMO

來源

2014-07-24 12:19:56 Turnip

不知道爲什麼你需要有2盒包含設定的高度沒有內容？

當然理性的事情是先填充內容，然後在你的div中添加填充以使設計成爲你想要的樣子。

將高度添加到一個空的div會在您的構建階段提前發現問題。

只需1個ID添加到每個COL-LG-12，如下圖所示：當你完成添加的內容簡單地引用了ID，並添加填充頂部或底部，以您的ID，你會發現

<div class="col-lg-12" id="topContent" style="border:1px solid red"> 
1 
</div> 
<div class="col-lg-12" id="bottomContent" style="border:1px solid red"> 
2 
</div>

現在代碼的前進要簡單得多。如果能夠做出反應，試圖早早地陷入困境就會尋找問題。

來源

2014-07-24 14:19:25 VincentVisser

如何使用bootstrap將瀏覽器窗口分成兩個策略？

回答

相關問題