html - para - menu desplegable responsive

Crear un menú desplegable de dos columnas en angular-ui-bootstrap

Question

Tengo alrededor de 13 elementos en mi lista, por lo que me gustaría hacer que mi menú desplegable en ui-bootstrap tenga al menos dos columnas. En este momento, aquí está mi html para el botón:

<div class="btn-group" uib-dropdown keyboard-nav>
<button id="simple-btn-keyboard-nav" type="button" class="btn btn-primary" uib-dropdown-toggle>
Graph By Indications<span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li class="nav-item" ng-repeat="item in test2" ng-click="fullIndicationFunction(item)"><a href="#">{{item}}</a></li>
</ul>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">
<li class="nav-item" ng-repeat="item in test1" ng-click="fullIndicationFunction(item)"><a href="#">{{item}}</a></li>
</ul>
</div>

En este momento, termino con columnas separadas una encima de la otra, y estoy tratando de ponerlas una al lado de la otra. He intentado envolver las etiquetas <ul> con una <div class="row">...</div> , pero eso simplemente impide que la lista desplegable funcione por completo.

Aquí está lo que produce el código anterior:

Answer 1

Usar uno <ul> y tener ambos elementos <li> dentro de las columnas en una <row> creará la lista de dos columnas que estaba buscando.

<div class="btn-group" uib-dropdown uib-keyboard-nav style="border-bottom: #357ebd 3px solid; border-radius: 10px">
<button class="btn btn-primary" ng-click="clearVals()">Clear</button>
<button type="button" class="btn btn-primary">
{{ displayedIndication }}
</button>
<button type="button" class="btn btn-primary" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" style="margin-right:-120px">
<div class="row" style="padding-left:7px; padding-right:7px">
<div class="col-sm-6" style="padding-left:-7px">
<li class="nav-item" ng-repeat="item in indList" ng-click="fullIndicationFunction(item)"><a href="#">{{item}}</a></li>
</div>
<div class="col-sm-6">
<li class="nav-item" ng-repeat="item in indList2" ng-click="fullIndicationFunction(item)"><a href="#">{{item}}</a></li>
</div>
</div>
</ul>
</div>

Utilicé estilos en línea solo para mostrar que hay algunos ajustes que deberá realizar para que las listas se vean limpias e incluso espaciadas sin superposición. Aquí está el resultado: