Question

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

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

Answer 1

您不需要使用Bootstrap来创建此布局（我也不认为Bootstrap支持它，至少没有重大修改）。

当然，您仍然可以将Bootstrap用于页面上的其他所有内容。如果您真的想要Google Apps外观，则需要调整一些默认的Bootstrap样式。

什么是可能的

为了好玩，以下是使用我在下面介绍的基本技术和各种Bootstrap组件快速淘汰Gmail界面。

演示： http://jsfiddle.net/Ly6wmyr2/1/

_{这里的代码绝对是演示质量，超出了Stack Overflow问题的范围。我将把它留给读者解剖。}

简单细分

演示： http://jsfiddle.net/vLm26g4g/1/

备注

我们正在使用绝对定位。

仅仅因为它绝对定位并不意味着它无法响应（如果需要）。

使用100％高度的身体内的所有4个侧面定位容器。

此方法适用于IE 7+的所有浏览器。如果您可以支持IE8 +，则使用box-sizing: border-box可以更轻松地进行维度计算。

这样的布局确实从LESS CSS中受益，因为您可以在一个位置声明基本尺寸。

HTML { height: 100%; } BODY { position: relative; height: 100%; } HEADER { position: absolute; top: 0; left: 0; right: 0; height: 64px; padding: 8px; background-color: #ddd; } #side { position: absolute; top: 80px; left: 0; bottom: 0; width: 20%; background-color: #eee; overflow: auto; } #content { position: absolute; top: 80px; left: 20%; bottom: 0; right: 0; overflow: auto; }

Answer 2

我认为没有一个开箱即用的Bootstrap解决方案，但是几个覆盖Bootstrap CSS 和左侧的position:absolute容器侧面导航和* 广泛内容 *这应该有用。你会看到左/右跨度都有独立的滚动条......

Gmail-like Bootstrap Layout Demo

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">

      <!-- top nav --->

    </div>
  </div>
</div>
<div class="box">
  <div class="row-fluid">
    <div class="column span3">

     <!-- left-side nav --->

    </div>
    <div class="column span9">

     <!-- content area --->

    </div>
  </div>
</div>

添加一些Bootstrap CSS覆盖，并调整.box和.column容器..

html, body {
    height: 100%;
}

.row-fluid {
    height: 100%;
}

.column:before, .column:after {
    content: "";
    display: table;
}

.column:after {
    clear: both;
}

.column {
    height: 100%;
    overflow: auto;
}

.box {
    bottom: 0; /* increase for footer use */
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
}

.span9.full {
    width: 100%;
}

以下是工作的Bootply： http://bootply.com/60116 （还包括内容区域行和分页）

Answer 3

查看

的脚手架部分

http://twitter.github.com/bootstrap/scaffolding.html#layouts

特别是在流体布局/固定布局部分

下

如果你想让部分可滚动，只需添加

overflow-y:auto;

到div中的css

Answer 4

这将是您使用scrollspy突出显示正文中当前“visibl”部分的代码

    <body data-spy="scroll" data-target=".bs-docs-sidebar">
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3 bs-docs-sidebar">
        <ul class="nav nav-list bs-docs-sidenav affix">
          <li class="active"><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
          <li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
          <li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> Fluid grid system</a></li>
          <li><a href="#layouts"><i class="icon-chevron-right"></i> Layouts</a></li>
          <li><a href="#responsive"><i class="icon-chevron-right"></i> Responsive design</a></li>
        </ul>
      </div>
    <div class="span9">
        <section id="global"></section>
        <section id="gridSystem</section>
        <section id="fluidGridSystem"></section>
        <section id="layouts"></section>
        <section id="responsive"></section>
    </div>
  </div>
</div>
</body>

如果您想添加固定的导航栏，只需将“position：fixed”添加到navbar css

即可

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

4 个答案:

什么是可能的

简单细分

Gmail-like Bootstrap Layout Demo