带有可滚动，固定列的Bootstrap网格

我正试图在我的Django页面上实现一个Bootstrap 3布局，而CSS（或我缺乏CSS技能）让我发疯…这个页面允许我将学生分成小组，我正在尝试使它漂亮可用于CSS。

我们的想法是在左侧有一个较小的列，其中包含未分配的学生（全部在面板中），并且在右侧有一个包含组的面板的大列。 这个截图应该解释这个概念：

当我尝试粘贴左列并使用滚动时，问题就开始了。 到目前为止，我所做的每一次尝试都做了一些破坏网格布局的奇怪事 下面的尝试使左列水平可滚动，即使只有空的空间，这使得移动面板很痛苦（我简化了Django的东西，所有这些都有效）。

 
 
 
Not assigned
 
 {% for student in group.0 %} 
  
 {{ student }} 
 
 {% endfor %} 
 
 
 
 {% for i in number_of_groups %} 
 
 
 Group {{ i|add:"1" }}  
 
 
 {% for student in group %} 
  
 {{ student }} 
 
 {% endfor %} 
 
 
 
 {% endfor %} 
 
 
   

最后的“保存组”按钮是另一种痛苦，因为它有时会出现在左栏的中间。

相关的CSS如下：

 .connectedLists { min-height:100px; } /* to allow moving of panels into empty lists */ .innerpanel { width:170px; }/* to make the student panels the same size */ .unsortedList { overflow-y:auto; height:85%; width:200px; } 

我在网格布局中做错了什么？ 谢谢！