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

2023年7月3日 318次阅读

我的列表中有大约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>

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

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

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

最佳答案 使用一个< ul>并且具有< li> < row>中列中的元素将创建我正在寻找的两个列列表.

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

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

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

点赞