引导下拉列表显示网格(Bootstrap dropdown to show grid)

2019-10-20 09:04发布

我要显示在下拉客户名单,但我想他们的信息分成像名字,姓氏,地址,城市,州和邮编列。

我怎样才能把网格下拉,并每行选择像一个普通的下拉列表? 这是我到目前为止,但行不看的权利,只有“创建一个新的客户端”行有正确的高亮当你在它悬停。

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



文章来源: Bootstrap dropdown to show grid