Question

我有3个bootstrap列彼此相邻。我希望左右列是静态的，只有中间列必须滚动。

我已尝试修改列，但这会更改列的宽度，如果我修复了正确的列，则会将其推到页面的左侧。

是否有其他方法可以在没有固定属性的情况下修复它？

这是我的页面的图像。

这是我的代码：

<div class=" col col-sm-2 leftBar" style="padding: 10px;">

    <div style="padding: 10px 10px; border-radius: 5px; background-color: #87CEEB;">

        <div class="list-group">
          <a href="#" class="list-group-item active">List <span class="badge">4</span></a>
          <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 1</a>
          <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 2</a>
          <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 3</a>
          <a href="#" class="list-group-item">&nbsp;&nbsp;&nbsp;List Item 4</a>
        </div>

    </div>

</div>

<div class=" col col-sm-8 centreContent" style="padding: 10px;">

    <div style="padding: 10px 10px; border-radius: 5px; background-color: #DCDCDC;">
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
        <p>This is the content</p>
    </div>

</div>

<div class=" col col-sm-2 rightBar" style="padding: 10px;">

    <div style="padding: 10px 10px; border-radius: 5px; background-color: #87CEEB;">
        <p>This is the Right Bar</p>
    </div>

</div>

Answer 1

demo

如果你将RightBar放在右边，固定的位置会很好。加上中心列上的bootstrap偏移量：

<div class=" col col-sm-8 col-sm-offset-2 centreContent" style="padding: 10px;">....</div>

Answer 2

这个问题可以通过两种方式解决......

固定左侧栏和右侧栏。对于左栏

position : fixed;
left:0;
top:50px;

右栏

position :fixed;
right:0;
top:50px;

或

您可以将此CSS应用于中间div ..

max-heght:750px;
overflow-x:auto;

Answer 3

首先，将您的列包装在.row和.container-fluid中。

然后使用属性.fixed-top创建一个名为（例如）position: fixed;的新类。并将此类应用于左列和右列。

然后将引导偏移列类.col-**-offset-*分别添加到中间列和右列。（在您的情况下：.col-sm-offset-2和.col-sm-offset-10）。

使用您的代码检查此示例：http://www.bootply.com/RhXeray5xT

如何使bootstrap左右列静态

3 个答案: