它是一个简单的选择器，带有图标而不是文本。
我希望用户能够从列表中选择一个图标。但是，由于有大量非常小的图标，我想让它们显示在下拉列表中的 2D 表格/网格/矩阵中（目前每行显示一个图标）。表格中的列数应根据页面宽度进行缩放。
我把它想象成一个简单colorpicker的图标而不是颜色。
我愿意使用不同的控件，如果不是bootstrap-selectpicker.
问问题
3077 次
2 回答
1
您可以将 col-md-6 （或每行想要的任何数量）应用于每个下拉项目，就像对任何其他元素一样。 样本
<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>
于 2016-08-05T17:07:11.127 回答
1
这是一个使用 Bootstrap-Select 的示例：更改下拉菜单列表以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>于 2016-08-05T17:15:35.107 回答