如何使自舉左右欄靜態

我有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>

來源

2017-01-16 Damian

如果您將RightBar放置在右側，固定位置將會很好。 https://jsfiddle.net/9zgeqv3s/在中央列加上自舉偏移 –

Thanx @ GL.awog。這是我想要的方式。請張貼它作爲答案，以便我可以接受它。 – Damian

demo

，如果你正確的位置上RightBar，固定位置會做得很好。加上一個中央列自舉偏移量：

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

來源

2017-01-16 14:14:13

這個問題可以從兩個方面來解決......

化妝左側欄和右側欄固定。爲右左吧酒吧

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

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

或

您可以將這個CSS用於中間格..

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

來源

2017-01-16 12:40:37

如果你修正了這兩列，它會將它們帶出浮標正在使用的流程。您需要在中間欄中添加'col-sm-offset-2'以解決當您更改爲'display：fixed' –

ohk時丟失的空間，所以第二種解決方案將會很好。 –

首先，你的包裹欄在.row和.container-fluid中。

然後創建一個名爲（例如）.fixed-top的新類，其屬性爲：position: fixed;。並將此類應用於左側和右側列。

然後分別將自舉偏移列類.col-**-offset-*添加到中心和右列。（在你的情況下：.col-sm-offset-2和.col-sm-offset-10）。

檢查這個例子與您的代碼：http://www.bootply.com/RhXeray5xT

來源

2017-01-16 12:51:22 jaumemk

如何使自舉左右欄靜態

回答

相關問題