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屏幕上，我想放两个盒子（一个放在容器左边，另一个放在容器右边）并在滚动时使它们固定

+---------------------------------------+
|                                       |
| +---+ +-----------+-----------+ +---+ |
| | 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;
}

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

Bootstrap在容器外面添加框

1 个答案: