我的小提琴是here。它基于对this post的回答。bootstrap selectpicker dropdown中的内联元素
这是一个简单的selectpicker用图标代替文本。
我希望用户能够从列表中选择一个图标。但是，由于有大量非常小的图标，我希望它们在下拉列表中显示为2D表格/网格/矩阵（目前每行显示一个图标）。表格中的列数应根据页面宽度进行缩放。
我把它当作simple colorpicker的图片而不是颜色。
我愿意使用不同的控件，如果不是bootstrap-selectpicker。
下面是使用自举 - 选择一个例子：改变下拉菜单列表中显示inline-block同时除去float。然后你可以设置一个宽度和任何你可能需要的样式。
工作实施例：
$('select').selectpicker();.bootstrap-select .dropdown-menu {
padding: 5px;
}
.bootstrap-select .dropdown-menu > li {
position: relative;
display: inline-block;
float: none;
text-align: center;
width: 20%;
}
@media (min-width: 768px) {
.bootstrap-select .dropdown-menu > li {
width: 10%;
}
.bootstrap-select .dropdown-menu > li > a {
font-size: 22px;
}
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<div class="container">
<label class="control-label" for="icon">Select icon</label>
<select class="form-control selectpicker" id="icon" name="icon" required>
<option value=9784>☸</option>
<option value=9785>☹</option>
<option value=9786>☺</option>
<option value=9787>☻</option>
<option value=9788>☼</option>
<option value=9789>☽</option>
<option value=9790>☾</option>
<option value=9791>☿</option>
<option value=9792>♀</option>
<option value=9793>♁</option>
<option value=9794>♂</option>
<option value=9795>♃</option>
<option value=9796>♄</option>
<option value=9797>♅</option>
<option value=9798>♆</option>
<option value=9799>♇</option>
<option value=9800>♈</option>
<option value=9801>♉</option>
<option value=9802>♊</option>
<option value=9803>♋</option>
<option value=9804>♌</option>
<option value=9805>♍</option>
<option value=9806>♎</option>
<option value=9807>♏</option>
<option value=9808>♐</option>
<option value=9809>♑</option>
<option value=9810>♒</option>
<option value=9811>♓</option>
<option value=9812>♔</option>
<option value=9813>♕</option>
<option value=9814>♖</option>
<option value=9815>♗</option>
<option value=9816>♘</option>
<option value=9817>♙</option>
<option value=9818>♚</option>
<option value=9819>♛</option>
<option value=9820>♜</option>
<option value=9821>♝</option>
<option value=9822>♞</option>
<option value=9823>♟</option>
<option value=9824>♠</option>
<option value=9825>♡</option>
<option value=9826>♢</option>
<option value=9827>♣</option>
<option value=9828>♤</option>
<option value=9829>♥</option>
<option value=9830>♦</option>
<option value=9831>♧</option>
<option value=9832>♨</option>
<option value=9833>♩</option>
<option value=9834>♪</option>
<option value=9835>♫</option>
<option value=9836>♬</option>
<option value=9837>♭</option>
<option value=9838>♮</option>
<option value=9839>♯</option>
<option value=9840>♰</option>
<option value=9841>♱</option>
<option value=9842>♲</option>
<option value=9843>♳</option>
<option value=9844>♴</option>
<option value=9845>♵</option>
<option value=9846>♶</option>
<option value=9847>♷</option>
<option value=9848>♸</option>
<option value=9849>♹</option>
<option value=9850>♺</option>
<option value=9851>♻</option>
<option value=9852>♼</option>
<option value=9853>♽</option>
<option value=9854>♾</option>
<option value=9855>♿</option>
<option value=9856>⚀</option>
<option value=9857>⚁</option>
<option value=9858>⚂</option>
<option value=9859>⚃</option>
<option value=9860>⚄</option>
<option value=9861>⚅</option>
<option value=9862>⚆</option>
<option value=9863>⚇</option>
<option value=9864>⚈</option>
<option value=9865>⚉</option>
<option value=9866>⚊</option>
<option value=9867>⚋</option>
<option value=9868>⚌</option>
<option value=9869>⚍</option>
<option value=9870>⚎</option>
<option value=9871>⚏</option>
<option value=9872>⚐</option>
<option value=9873>⚑</option>
<option value=9874>⚒</option>
<option value=9875>⚓</option>
<option value=9876>⚔</option>
<option value=9877>⚕</option>
<option value=9878>⚖</option>
<option value=9879>⚗</option>
<option value=9880>⚘</option>
<option value=9881>⚙</option>
<option value=9882>⚚</option>
</select>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>您可以将col-md-6（或每行所需的多少）应用于每个下拉项目，就像您使用其他任何元素一样。 sample
<div class="btn-group">
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Icon x2 Menu <b class="caret"></b></a>
<ul class="dropdown-menu" id="icons"><li class="dropdown-header">Glyphicons</li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.adjust"><a href="#"><i class="glyphicon glyphicon-adjust"></i></a></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_center"><a href="#"><i class="glyphicon glyphicon-align-center"></i></a></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_justify"><a href="#"><i class="glyphicon glyphicon-align-justify"></i></a></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_left"><a href="#"><i class="glyphicon glyphicon-align-left"></i></a></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.align_right"><a href="#"><i class="glyphicon glyphicon-align-right"></i></a></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.arrow_down"><a href="#"><i class="glyphicon glyphicon-arrow-down"></i></a></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.arrow_left"><a href="#"><i class="glyphicon glyphicon-arrow-left"></i></a></li>
<li class="pickList col-md-6 text-center" value="Icons.Glyphicons.bell"><a href="#"><i class="glyphicon glyphicon-bell"></i></a></li>
</ul>
</li>
</ul>
</div>
感谢。这正是我所需要的，但它会影响所有selectpickers（[fiddle]（https://jsfiddle.net/1y2Lf5y8/1/））。如果将来有人遇到这个问题，我只需指定一个自定义选择器（[fiddle]（https://jsfiddle.net/1y2Lf5y8/2/））。 – Jedi