跨越css列的Bootstrap下拉列表

Question

我正在处理的页面最初使用的是Bootstrap 3网格系统（例如：col-md-3），但由于某些排序限制，客户希望将字段的排序垂直堆叠成两列。我认为css列将是要走的路。在大多数情况下，它运作良好，但正如你在图像中看到的那样，我的下拉列表，如果它们足够长，将会突破列。理想情况下，下拉列表将继续覆盖容器div。

以下是该部分的HTML缩小到下拉列表和容器（取自chrome dev工具）

<div class="fieldSection ng-scope">                
    <div ng-repeat="field in group.TransportFields | orderBy:'Ord'" class="ng-scope">
        <div class="detailField">
            <label class="wrap-text control-label col-md-5 ng-scope ng-binding" ng-show="true" for="CATALOG.COUNTRY" tooltip-placement="bottom" tooltip="Country the program originally aired in">Country</label>
            <div ng-switch="field.InputType" ng-class="field.ID=='DIGITIZE.COPIES' ? 'col-md-20' : 'col-md-15'" class="col-md-15">                    
                <div ng-switch-when="Enumeration" class="ng-scope">
                    <div class="btn-group col-md-20 open">
                        <button class="btn btn-default btn-enum dropdown-toggle ng-binding" id="CATALOG.COUNTRY + '-dd'" type="button" data-toggle="dropdown"><span class="caret"></span>&nbsp;&nbsp;&nbsp;</button>
                        <ul class="dropdown-menu detailDropdown" role="menu" aria-labelledby="CATALOG.COUNTRY + '-dd'">
                            <li role="presentation" ng-repeat="item in enumFields[field.ID]" class="ng-scope"><a role="menuitem" tabindex="-1" href="#" data-mv="1" ng-click="$parent.field.Value = item.Value" class="ng-binding"></a></li>
                            <li role="presentation" ng-repeat="item in enumFields[field.ID]" class="ng-scope"><a role="menuitem" tabindex="-1" href="#" data-mv="2" ng-click="$parent.field.Value = item.Value" class="ng-binding">United States</a></li>
                            <li role="presentation" ng-repeat="item in enumFields[field.ID]" class="ng-scope"><a role="menuitem" tabindex="-1" href="#" data-mv="3" ng-click="$parent.field.Value = item.Value" class="ng-binding">Afghanistan</a></li>
                            <li role="presentation" ng-repeat="item in enumFields[field.ID]" class="ng-scope"><a role="menuitem" tabindex="-1" href="#" data-mv="197" ng-click="$parent.field.Value = item.Value" class="ng-binding">Zimbabwe</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end ngRepeat: field in group.TransportFields | orderBy:'Ord' -->
</div>

和适用的LESS

input, textarea, button, table, ul {
   -webkit-column-break-inside: avoid;        
   break-inside:avoid;
}

.fieldSection, .workOrderSection {
   -moz-column-count: 2;
   -webkit-column-count: 2;
   column-count: 2;
   -moz-column-gap: 2em;
   -webkit-column-gap: 2em;
   column-gap: 2em;
   -moz-column-width: 20em;
   -webkit-column-width: 20em;
   column-width: 20em;
   -webkit-column-span: none;
   column-span: none;    
}

.detailField {
   -webkit-column-break-inside: avoid;        
   break-inside:avoid;

   > div {
      margin: 1px 0px;
   }

   label {
      padding-top: 3px;
      padding-left: 4px;
      font-size: 12px;
      height: 20px;
   }

   button,
   input {
      font-size: 12px;
   }
}

我在这里缺少什么？