Bootstrap 3-固定側邊欄佈局問題

我是bootb中的新手，我在設計一個管理面板，繼承人爲DEMO。Bootstrap 3-固定側邊欄佈局問題

我想使側欄高度equaly取決於正確的內容div。 .i.e（側欄背景顏色將爲灰色）。

HTML標記：（也想知道我的HTML結構是否適當）

<!-- Headder row --> 
    <div class="row"> 
     <div class="navbar"> ..... </div> 
    </div> 

<!-- Content row --> 
    <div class="row"> 
     <!-- SIDEBAR Open --> 
     <div id="sidebar-left" class="col-2 col-lg-2"> 
      .... 
     </div> 
    <!-- right content box --> 
    <div id="content-right" class="col-lg-10 container" > 
     ...... 
    </div 
    </div> 


<!-- Footer row --> 
    <div class="row"> 
     ...... 
    </div>

預期輸出： enter image description here

來源

2013-08-06 Satinder singh

運氣好的話這個自舉3？目前正在考慮沿着這些方向執行某些事情 – backdesk

試試這個

http://jsfiddle.net/BM65D/

body{ 
    margin:0; 
    padding:0; 
} 
.header{ 
    background-color:#00A2E8; 
    height:50px; 
    position:fixed; 
    top:0; 
    width:100%; 
} 
.footer{ 
    background-color:gray; 
    height:50px; 
    position:fixed; 
    bottom:0; 
    width:100%; 
} 
.left{ 
    height:400px; 
    background-color:#C3C3C3; 
    width:200px; 
    position:fixed; 
    top:50px; 
} 
.right{ 
    left:200px; 
    width:100%; 
    position:absolute; 
}

來源

2013-08-06 10:42:45 falguni

感謝您的回覆，但在這裏您已經修復了左欄的高度，並且還使用了bootstrap ?.我需要列右側，列左 –

儘量得到正確的容器高度，如下圖所示分配給它它左側導航欄：

$(document).ready(function(){ 
    var s = $(".container").outerHeight(true); 
    s+= "px"; 
    //alert("height" + s); 
    $("#sidebar-left").css("height", s); 
    $("#sidebar-left").css("background-color", "grey"); 


});

來源

2013-08-06 10:43:50 web2008

謝謝你的嘗試，但是是他們的任何其他方式，而不使用Jquery，而不是計算高度使用的bootstrap內置類 –

我認爲你只能在左側內容的高度和右側的內容是固定的和靜態的。否則只能使用jquery .. – web2008

試試這個：

class="col-lg-2 col-sm-1"

來源

2013-09-12 14:01:37 Fyb3roptik

嘗試在扭曲整個內容區域。貨櫃。舊文檔看到這個Fluid layout

來源

2013-09-12 14:59:41 ashwinm

有tag bootstrap 3，您提供的鏈接是版本2.3 –

下，你可以用display:table-cell屬性來完成這個

我創建了一個bootply演示=>http://bootply.com/100790

步驟：

添加另一個類的包裝等。 mainwrap和CSS

.mainwrap { 
display:table; 
}

將CSS添加到側邊欄左側和內容正確

.sidebar-left { 
    display:table-cell; 
    float:none; 
} 

.content-right { 
display:table-cell; 
float:none; 
}

我已經從內容右側刪除了最小高度，因爲表格不能使用它。也改變浮動到無。因爲你不再需要它。

工作演示：http://bootply.com/100790

希望這有助於

來源

2013-12-16 12:49:31

Bootstrap 3-固定側邊欄佈局問題

回答

相關問題