Bootstrap下拉菜单显示网格

Question

我想在下拉列表中显示客户端列表，但我希望将他们的信息分隔成FirstName，LastName，Address，City，State和Zip等列。

如何在下拉菜单中放置网格并让每一行都像常规下拉菜单一样可选？这是我迄今为止的内容，但行看起来不正确，只有当您将鼠标悬停在其上时，“创建新客户端”行才具有正确的高亮显示。

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" ng-click="loadClientList()"> 
     {{client.DisplayName || "Select a client..."}} 
     <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li> 
      <div class="row" style="width: 650px;"> 
       <div class="col-sm-2"><b>First Name</b></div> 
       <div class="col-sm-2"><b>Last Name</b></div> 
       <div class="col-sm-3"><b>Address</b></div> 
       <div class="col-sm-3"><b>City</b></div> 
       <div class="col-sm-1"><b>State</b></div> 
       <div class="col-sm-1"><b>Postal</b></div> 
      </div> 
     </li> 
     <li> 
      <a ng-click="newClient()">[Create a new client]</a> 
     </li> 
     <li ng-repeat="c in clients"> 
      <div class="row" style="width: 650px;"> 
       <div class="col-sm-2"><a ng-click="selectClient(c)">{{c.FirstName}}</a></div> 
       <div class="col-sm-2"><a ng-click="selectClient(c)">{{c.LastName}}</a></div> 
       <div class="col-sm-3"><a ng-click="selectClient(c)">{{c.Address}}</a></div> 
       <div class="col-sm-3"><a ng-click="selectClient(c)">{{c.City}}</a></div> 
       <div class="col-sm-1"><a ng-click="selectClient(c)">{{c.StateCode}}</a></div> 
       <div class="col-sm-1"><a ng-click="selectClient(c)">{{c.PostalCode}}</a></div> 
      </div> 
     </li> 
    </ul> 
</div> 

Answer 1

看看这个巨型菜单，这就是所谓的Yamm：http://geedmo.github.io/yamm/