Bootstrap全寬和高度

Question

什麼是使用Bootstrap創建2列（側欄 - 主）全寬頁面的正確方法。我發現了幾個例子，但主要是爲了寬度。

我的嘗試是簡單地覆蓋：

html, body { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
} 

sidebar { 
    width: 200px; 
    height: 100%; 
} 

但是這爲小屏幕的關注。什麼是實施2列頁面佈局的正確方法。我正在嘗試爲我的管理小組進行佈局。

Answer 1

您可以只使用引導fluid grid？它將創建一個2列靈活的佈局。然後，如果需要，您可以使用Bootstrap響應，使其在一列中摺疊。

從Bootstrap網站的代碼來做到這一點。

<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span2"> 
    <!--Sidebar content--> 
    </div> 
    <div class="span10"> 
    <!--Body content--> 
    </div> 
</div> 
</div> 

而且小提琴：http://jsfiddle.net/MgcDU/3581/

Answer 2

而不是將側邊欄硬編碼爲200像素，爲什麼不把它設置爲百分比（20％）。這樣，即使用戶在較小/較大的屏幕上放大/縮小頁面，側欄也始終保持一致。

Answer 3

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span2"> 
     <!--Sidebar content--> 
    </div> 
    <div class="span10"> 
     <!--Body content--> 
    </div> 
    </div> 
</div> 

看到這裏http://twitter.github.io/bootstrap/scaffolding.html

Answer 4

的事情做的是利用媒體查詢。

在大屏幕上浮動邊欄，但在小屏幕中不會，只是讓它在您的內容下排隊。

Answer 5

我設法做到了這一點，但我仍然有邊界問題：.lefty和.content的邊界位於頁腳之上，不知道爲什麼，我解決了您的問題，您是否解決我的問題; ）

HTML：

<div class="container"> 

 <div class="row header"> 
     <div class="col-xs-12">col-xs-12</div> 
     </div> <!-- End of header --> 


     <div class="row content"> 
       <div class="col-xs-3 lefty">lefty</div> 
       <div class="col-xs-9 content">content</div> 
     </div> <!-- End of content --> 

     <div class="row footer"> 
     <div class="col-xs-12">col-xs-12</div> 
     </div> <!-- End of footer --> 

CSS：

html,body{ 
    height:100%; 
    min-height:100%; 
    width: 100%; 
    min-width: 100%; 
    margin: 0; 
    padding:0; 
} 
.container { 
    height:100%; 
    width: 100%; 
    min-width: 100%; 
    margin:0; 
    padding:0; 
} 
.full-height{ 
    width:100%; 
    height:100%; 
    min-height:100%; 
    margin:0; 
    padding:0; 
} 
.header{ 
    background-color: #333; 
    border: 1px solid white; 
    height: 10%; 
    color: white; 
    margin:0; 
    padding:0; 
} 
.lefty{ 
    background-color: #333; 
    border: 1px solid white; 
    height: 80%; 
    color: white; 
    margin:0; 
    padding:0; 
} 
.content{ 
    background-color: #333; 
    border: 1px solid white; 
    height: 80%; 
    color: white; 
    margin:0; 
    padding:0; 
} 
.footer{ 
    background-color: #333; 
    border: 1px solid white; 
    height: 10%; 
    color: white; 
    margin:0; 
    padding:0; 
} 

最好的，