twitter-bootstrap - Bootstrap 在容器外添加框

Question

我有一个 Vanilla 版本的 boostrap 3。

我的页面基于此示例:

<div id="dashboadMainId" class="container">
    <div class="row">
      <div class="col-md-6">TEST</div>
      <div class="col-md-6">TEST</div>
    </div>
</div>
+---------------------------------------+
|                                       |
|       +-----------+-----------+       |
|       |           |           |       |
|       |           |           |       |
|       |           |           |       |
|       |           |           |       |
|       +-----------+-----------+       |
|                                       |
+---------------------------------------+

在 16:9 屏幕上，我想放置两个框(一个在容器左侧，另一个在容器右侧)并在滚动时将它们固定

+---------------------------------------+
|                                       |
| +---+ +-----------+-----------+ +---+ |
| | L | | aaaaaaaaa | fffffffff | | R | |
| +---+ | bbbbbbbbb | ggggggggg | +---+ |
|       | ccccccccc | hhhhhhhhh |       |
|       | ddddddddd | iiiiiiiii |       |
|       | eeeeeeeee | lllllllll |       |
|       +-----------+-----------+       |
|                                       |
+---------------------------------------+


+---------------------------------------+
| +---+ +-----------+-----------+ +---+ |
| | L | | ccccccccc | hhhhhhhhh | | R | | ^
| +---+ | ddddddddd | iiiiiiiii | +---+ | |
|       | eeeeeeeee | lllllllll |       | |
|       +-----------+-----------+       | |
|                                       |
|                                       |
|                                       |
+---------------------------------------+

有可能吗？

Answer 1

您可以在 Bootstrap 中指定多个列大小。下面的 HTML 应该可以帮助您

<div id="dashboadMainId" class="container">
    <div class="row">
      <div class="col-lg-1 visible-lg fixed">Left</div>
      <div class="col-md-6 col-lg-5">TEST</div>
      <div class="col-md-6 col-lg-5">TEST</div>
      <div class="col-lg-1 visible-lg fixed">Right</div>
    </div>
</div>

在该示例中，我们使用响应式实用程序 ( http://getbootstrap.com/css/#responsive-utilities ) 仅使左右列在大屏幕上可见，并使用网格选项 ( http://getbootstrap.com/css/#grid-options ) 使中央列在中型屏幕上宽 6 和 5在大屏幕上宽。在大屏幕上，左右两列是 1 宽。

要使左右框保持静止，您需要申请 position: fixed使用 CSS 给他们:

.fixed {
    position: fixed;
}

您可能需要更多样式，具体取决于您要实现的目标，但这本质上是您在页面上制作静态内容的方式。