twitter-bootstrap Bootstrap 3-修复侧边栏布局问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18077659/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3- fixed sidebar layout issue
提问by Satinder singh
I am newbie in bootstrap , I am designing a admin panel, heres the DEMO.
我是 bootstrap 的新手，我正在设计一个管理面板，这是 DEMO。
I want to make the sidebar height equaly depend on right content div. .i.e (side bar background color will be gray).
我想让侧边栏高度相等取决于正确的内容 div。.ie（侧栏背景颜色将为灰色）。
Html Markup :(also want to know whether my html structure was proper)
Html Markup :(也想知道我的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>
Expected output :
预期输出：
回答by Surjith S M
You can do this with display:table-cellproperty
你可以用display:table-cell财产来做到这一点
I have created a bootply demo => http://bootply.com/100790
我创建了一个 bootply 演示 => http://bootply.com/100790
Steps:
脚步：
Add another class to your wrapper like .mainwrap and in CSS
将另一个类添加到您的包装器中，例如 .mainwrap 和 CSS
.mainwrap {
display:table;
}
Add CSS to sidebar left and content right
将 CSS 添加到侧边栏左侧和内容右侧
.sidebar-left {
display:table-cell;
float:none;
}
.content-right {
display:table-cell;
float:none;
}
I have removed min-height from content-right, as table will not work with it. Also changed float to none. becuase you no longer need it.
我已经从 content-right 中删除了 min-height，因为 table 无法使用它。也将浮动更改为无。因为你不再需要它了。
Working Demo: http://bootply.com/100790
工作演示：http: //bootply.com/100790
Hope this helps
希望这可以帮助
回答by Falguni Panchal
try this
试试这个
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;
}
回答by web2008
Try to get the right container height and assign it it to left side navigation bar as shown below:
尝试获取正确的容器高度并将其分配给左侧导航栏，如下所示：
$(document).ready(function(){
var s = $(".container").outerHeight(true);
s+= "px";
//alert("height" + s);
$("#sidebar-left").css("height", s);
$("#sidebar-left").css("background-color", "grey");
});
回答by Fyb3roptik
Try this:
试试这个：
class="col-lg-2 col-sm-1"
回答by ashwinm
Try warping the whole content area in .container . Saw this in old docs under Fluid layout
尝试扭曲.container 中的整个内容区域。在Fluid layout下的旧文档中看到了这个
