在angular-ui-bootstrap中创建两列下拉列表
在angular-ui-bootstrap中创建两列下拉列表
提问于 2016-01-26 06:11:03
我的列表中大约有13个项目，所以我想让ui-bootstrap中的下拉菜单至少有两列。现在，这是我的按钮的html：
<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>现在，我最终得到了一个单独的列在彼此的顶部，我试图让它们彼此并排。我尝试过用<div class="row">...</div>包装<ul>标签，但这完全阻止了下拉菜单的工作。
下面是上面的代码产生的结果：
回答 1
Stack Overflow用户
发布于 2016-02-17 00:06:28
使用一个<ul>并在<row>的列中包含两个<li>元素将创建我要查找的两列列表。
<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>我使用内联样式只是为了说明您需要做一些调整，才能使列表看起来整洁，间隔均匀，不会重叠。结果如下：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35003406
复制相关文章
相似问题
腾讯云开发者
