Bootstrap 在容器外添加框

Question

我有一个普通版本的 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 屏幕上，我想放置两个框（一个在容器左侧，另一个在容器右侧）并在滚动时将它们设为 FIXED

+---------------------------------------+
|                                       |
| +---+ +-----------+-----------+ +---+ |
| | 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 宽。

要使左右框保持静态，您需要使用 CSS 将position: fixed 应用于它们：

.fixed {
    position: fixed;
}

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