css - Bootstrap 全宽和全高

Question

使用 Bootstrap 创建 2 列(侧边栏 - 主要)全宽页面的正确方法是什么。我找到了几个例子，但主要是关于宽度的。

我的尝试是简单地覆盖:

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

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

然而，这会引起对较小屏幕的担忧。什么是实现 2 列页面布局的正确方法。我正在尝试为我的管理面板制作布局。

Answer 1

您可以只使用 Bootstrap fluid grid ？它将创建一个 2 列的灵活布局。然后，您可以根据需要使用 Bootstrap responsive 将其折叠成一列。

来自 Bootstrap 网站的代码来执行此操作。

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

还有一把 fiddle :http://jsfiddle.net/MgcDU/3581/