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/