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-固定侧边栏布局问题

回答

相关问题