ブートストラップの左右の列を静的にする方法

Question

3つのブートストラップ列が隣り合っています。私は左と右の列が静的で、中央の列のみがスクロールする必要があります。

私は列を固定してみましたが、列の幅が変わり、右の列を固定すると、ページの左側に移動します。

固定属性なしで固定する別の方法はありますか？

ここは私のページの画像です。固定

<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を配置した場合、固定位置だけで罰金を行います。さらに中央の列のブートストラップオフセット：

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

Answer 2

この問題は、2つの方法で解決することができる...

メイク左サイドバー、右サイドバー：

は、ここに私のコードです。左のバーのための

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

右バーのための

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

または

あなたは真ん中のdivにこのCSSを適用することができます。..

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

Answer 3

まず第一に、あなたの列を折り返します.rowおよび.container-fluidにある。

次に、プロパティがposition: fixed;の.fixed-topという新しいクラスを作成します。このクラスを左右の列に適用します。

次に、ブートストラップオフセット列クラス.col-**-offset-*をそれぞれ中央の列と右側の列に追加します。 （あなたの場合：.col-sm-offset-2と.col-sm-offset-10）。

はあなたのコードでこの例をチェックしてください：http://www.bootply.com/RhXeray5xT