Html 跨css列的引导下拉列表

我正在处理的页面最初使用bootstrap3网格系统（例如：col-md-3），但由于一些排序限制，客户端希望字段的排序垂直堆叠到两列中。我认为css列将是一个不错的选择。在大多数情况下，它运行良好，但正如您在图中所看到的，我的下拉列表如果足够长，将在列之间中断。理想情况下，下拉列表将继续覆盖container div

这是该部分的HTML压缩为下拉列表和容器（取自chrome开发工具）

---

我在这里错过了什么？

这一次运气好吗？有同样的问题。不幸的是没有。我只是没有使用css列和更改布局

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

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;
   }
}