Bootstrap下拉菜单显示网格 [英] Bootstrap dropdown to show grid
本文介绍了Bootstrap下拉菜单显示网格的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在下拉列表中显示客户列表,但是我希望他们的信息分为名字",姓氏",地址",城市",州"和邮编"之类的列.
I want to show a list of clients in a dropdown, but I want their info separated into columns like FirstName, LastName, Address, City, State, and Zip.
如何在下拉菜单中放置网格并使每一行都像常规下拉菜单一样可选?这是我到目前为止的内容,但是当您将鼠标悬停在这些行上时,它们的行看起来并不正确,只有"Create a new client"行具有正确的突出显示.
How can I put a grid in the dropdown and have each row be selectable like a regular dropdown? This is what I have so far, but the rows don't look right and only the "Create a new client" row has the correct highlighting when you hover over it.
<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>
推荐答案
看看这个超级菜单,它被称为Yamm: http://geedmo.github.io/yamm/
Look at this Mega Menu, it's called Yamm: http://geedmo.github.io/yamm/
这篇关于Bootstrap下拉菜单显示网格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文