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

Question

我正试图在我的Django页面上实现一个Bootstrap 3布局，而CSS（或我缺乏CSS技能）让我很生气...这个页面允许我将学生分成小组，而且我和＃39;我试图让它漂亮且可用于CSS。

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

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

<div class="row">
    <div class="col-md-3">
        <div class="unsortedList" data-spy="affix" data-offset-top="0">
            <h4>Not assigned</h4>
            <ul id="0" class="list-unstyled connectedLists">
                {% for student in group.0 %}
                    <li class="panel panel-primary innerpanel">
                        <input type="hidden" ...>
                        <div class="panel-body">
                            {{ student }}
                        </div>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="col-md-9">
        {% for i in number_of_groups %}
            <div class="col-md-4" id="panel_{{ i }}">
                <div class="panel panel-default outerpanel">
                    <div class="panel-heading">
                        Group {{ i|add:"1" }}
                        <span class="badge pull-right" id="badge_{{ i }}"></span>
                    </div>
                    <div class="panel-body">
                        <ul id="{{ i }}" class="list-unstyled connectedLists">
                            {% for student in group %}
                                <li class="panel panel-primary innerpanel">
                                    <input type="hidden"...>
                                    <div class="panel-body">
                                        {{ student }}
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>

<div class="row">
    <input type="submit" value="Save Groups" class="btn btn-default">
</div>

＆＃34;保存群组＆＃34;最后的按钮是另一种痛苦，因为它有时出现在左栏的中间。

相关的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;
}

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