Question

是否可以使用Twitter Bootstrap 3.0创建类似GMail的布局，以便布局始终适合视口（窗口高度），侧边栏和内容区域可单独滚动？

--------------------------------------------------------------------------
|                                                                        |
|                    Fixed top navbar                                    |
--------------------------------------------------------------------------
|         |                                                              |   
| Sidebar |       Content area scrollable                                |
| scrollable                                                             |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|         |                                                              |
|------------------------------------------------------------------------|

P / S ：有趣的是，Bootstrap 3.0网站上的所有示例都没有左侧导航菜单。

是的，我有一个示例（http://jsfiddle.net/tawani/EFhGL/embedded/result/），它接近我想要的但是由于某些原因，在IE10中，所有内容都是右对齐的。

Answer 1

<div class="col-sm-12 col-md-12 col-lg-12">top nav</div>
<div class="row">
  <div class="col-sm-2 col-md-2 col-lg-2">side bar</div>
  <div class="col-sm-10 col-md-10 col-lg-10">content area</div>
</div>

Answer 2

您可能想尝试使用sidebar和content周围的包装来实现100％的身高和固定的侧边栏，例如Gmail ..

以下是Bootply的一个示例：http://bootply.com/82174

如何使用Twitter Bootstrap 3.0创建类似Gmail的布局

2 个答案: