html – 在angular-ui-bootstrap中创建两列下拉列表

概述我的列表中有大约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 我的列表中有大约13个项目,所以我想让我在ui-bootstrap中的下拉菜单至少有两列.现在,这是我的按钮的HTML：

<div  uib-dropdown keyboard-nav>  <button ID="simple-btn-keyboard-nav" type="button"  uib-dropdown-toggle>            Graph By Indications<span ></span>  </button>    <ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav">      <li  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  ng-repeat="item in test1" ng-click="fullindicationFunction(item)"><a href="#">{{item}}</a></li>    </ul></div>

现在,我最终在彼此的顶部有单独的列,我试图让它们彼此相邻.我试过包装< ul>带有< div class =“row”> …< / div>的标签,但这只是停止下拉列表的完全工作.

以下是上面代码生成的内容：

解决方法 使用一个< ul>并且具有< li> < row>中列中的元素将创建我正在寻找的两个列列表.

<div  uib-dropdown uib-keyboard-nav >          <button  ng-click="clearVals()">Clear</button>          <button type="button" >            {{ displayedindication }}              </button>          <button  type="button"  uib-dropdown-toggle>            <span ></span>          </button>              <ul uib-dropdown-menu role="menu" aria-labelledby="simple-btn-keyboard-nav" >                <div  >                  <div  >                    <li  ng-repeat="item in indList" ng-click="fullindicationFunction(item)"><a href="#">{{item}}</a></li>                  </div>                  <div >                    <li  ng-repeat="item in indList2" ng-click="fullindicationFunction(item)"><a href="#">{{item}}</a></li>                  </div>                </div>              </ul>            </div>

我使用内联样式只是为了表明你需要进行一些调整才能使列表看起来干净整齐,甚至间隔不重叠.下面是结果：

总结

以上是内存溢出为你收集整理的html – 在angular-ui-bootstrap中创建两列下拉列表全部内容，希望文章能够帮你解决html – 在angular-ui-bootstrap中创建两列下拉列表所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。