13

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

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

4 回答 4

47

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

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

什么是可能的

为了好玩，这里使用我在下面描述的基本技术和各种 Bootstrap 组件快速仿制了 Gmail 界面。

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

这里的代码绝对是演示质量，超出了 Stack Overflow 问题的范围。我会留给读者去剖析。

简单故障

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

笔记

  1. 我们使用绝对定位。
  2. 仅仅因为它绝对定位并不意味着它不能响应（如果需要）。
  3. 使用 100% 高度主体内的所有 4 个侧面定位容器。
  4. 这种方法适用于所有浏览器 IE 7+。如果可以支持 IE8+，那么使用box-sizing: border-box会使维度计算更容易。
  5. 像这样的布局确实受益于 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;
}
于 2013-04-21T21:09:43.157 回答
4

我认为没有开箱即用的 Bootstrap 解决方案，但是对 Bootstrap CSS和左侧导航position:absolute周围的容器和 *宽内容进行了一些覆盖，这应该可以工作。你会看到左/右跨度都有独立的滚动条......

类似 Gmail 的 Bootstrap 布局演示

<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 （还包括内容区域行和分页）

于 2013-04-26T20:42:18.173 回答
2

查看脚手架部分

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

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

如果您想让这些部分可滚动，只需添加

overflow-y:auto;

到你的 div 中的 css

于 2013-03-27T18:43:53.910 回答
1

那将是您的代码使用滚动间谍来突出显示正文中当前的“可见”部分

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

如果要添加固定导航栏，只需将“位置：固定”添加到导航栏 css

于 2013-04-23T20:14:20.820 回答