Bootstrap 3-修复侧边栏布局问题答案

【问题标题】：Bootstrap 3- fixed sidebar layout issueBootstrap 3-修复侧边栏布局问题
【发布时间】：2013-12-16 20:49:31
【问题描述】：

我是 bootstrap 的新手，我正在设计一个管理面板，这里是 DEMO。

我想让侧边栏高度同样取决于正确的内容 div。 .i.e（侧边栏背景颜色为灰色）。

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>

预期输出：

【问题讨论】：

对 bootstrap 3 有帮助吗？目前正在考虑按照这些思路实施。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

试试这个

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;
}

【讨论】：

感谢您的回复，但是在这里您已经固定了左栏的高度，并且还没有使用引导程序？我需要右列，左列

【解决方案2】：

您可以使用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;
}

我已从 content-right 中删除 min-height，因为 table 无法使用它。也将浮动更改为无。因为你不再需要它了。

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

希望对你有帮助

【讨论】：

【解决方案3】：

尝试获取正确的容器高度并将其分配给左侧导航栏，如下所示：

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


});

【讨论】：

感谢您的尝试，但他们是否有任何其他方式不使用 Jquery 而不是计算 hieght 使用的引导内置类
我认为只有在左侧内容和右侧内容的高度固定且静态的情况下才能通过 CSS 完成。否则应该只使用 Jquery..

【解决方案4】：

试试这个：

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

【讨论】：

【解决方案5】：

尝试扭曲 .container 中的整个内容区域。在 Fluid layout 下的旧文档中看到了这一点

【讨论】：

有标签bootstrap 3，你提供的链接是2.3版