bootstrap selectpicker下拉列表中的内联元素

Question

我的小提琴是here。它基于this post的答案。

这是一个简单的selectpicker，带有图标而不是文字。

我希望用户能够从列表中选择一个图标。但是，由于存在大量非常小的图标，我希望它们在下拉列表中显示在2D表格/网格/矩阵中（目前每行显示一个图标）。表格中的列数应根据页面宽度进行缩放。

我将其标记为simple colorpicker，带有图标而不是颜色。

我愿意使用不同的控件，如果不是bootstrap-selectpicker。

Answer 1

您可以将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>

Answer 2

以下是使用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>&#9784;</option>
    <option value=9785>&#9785;</option>
    <option value=9786>&#9786;</option>
    <option value=9787>&#9787;</option>
    <option value=9788>&#9788;</option>
    <option value=9789>&#9789;</option>
    <option value=9790>&#9790;</option>
    <option value=9791>&#9791;</option>
    <option value=9792>&#9792;</option>
    <option value=9793>&#9793;</option>
    <option value=9794>&#9794;</option>
    <option value=9795>&#9795;</option>
    <option value=9796>&#9796;</option>
    <option value=9797>&#9797;</option>
    <option value=9798>&#9798;</option>
    <option value=9799>&#9799;</option>
    <option value=9800>&#9800;</option>
    <option value=9801>&#9801;</option>
    <option value=9802>&#9802;</option>
    <option value=9803>&#9803;</option>
    <option value=9804>&#9804;</option>
    <option value=9805>&#9805;</option>
    <option value=9806>&#9806;</option>
    <option value=9807>&#9807;</option>
    <option value=9808>&#9808;</option>
    <option value=9809>&#9809;</option>
    <option value=9810>&#9810;</option>
    <option value=9811>&#9811;</option>
    <option value=9812>&#9812;</option>
    <option value=9813>&#9813;</option>
    <option value=9814>&#9814;</option>
    <option value=9815>&#9815;</option>
    <option value=9816>&#9816;</option>
    <option value=9817>&#9817;</option>
    <option value=9818>&#9818;</option>
    <option value=9819>&#9819;</option>
    <option value=9820>&#9820;</option>
    <option value=9821>&#9821;</option>
    <option value=9822>&#9822;</option>
    <option value=9823>&#9823;</option>
    <option value=9824>&#9824;</option>
    <option value=9825>&#9825;</option>
    <option value=9826>&#9826;</option>
    <option value=9827>&#9827;</option>
    <option value=9828>&#9828;</option>
    <option value=9829>&#9829;</option>
    <option value=9830>&#9830;</option>
    <option value=9831>&#9831;</option>
    <option value=9832>&#9832;</option>
    <option value=9833>&#9833;</option>
    <option value=9834>&#9834;</option>
    <option value=9835>&#9835;</option>
    <option value=9836>&#9836;</option>
    <option value=9837>&#9837;</option>
    <option value=9838>&#9838;</option>
    <option value=9839>&#9839;</option>
    <option value=9840>&#9840;</option>
    <option value=9841>&#9841;</option>
    <option value=9842>&#9842;</option>
    <option value=9843>&#9843;</option>
    <option value=9844>&#9844;</option>
    <option value=9845>&#9845;</option>
    <option value=9846>&#9846;</option>
    <option value=9847>&#9847;</option>
    <option value=9848>&#9848;</option>
    <option value=9849>&#9849;</option>
    <option value=9850>&#9850;</option>
    <option value=9851>&#9851;</option>
    <option value=9852>&#9852;</option>
    <option value=9853>&#9853;</option>
    <option value=9854>&#9854;</option>
    <option value=9855>&#9855;</option>
    <option value=9856>&#9856;</option>
    <option value=9857>&#9857;</option>
    <option value=9858>&#9858;</option>
    <option value=9859>&#9859;</option>
    <option value=9860>&#9860;</option>
    <option value=9861>&#9861;</option>
    <option value=9862>&#9862;</option>
    <option value=9863>&#9863;</option>
    <option value=9864>&#9864;</option>
    <option value=9865>&#9865;</option>
    <option value=9866>&#9866;</option>
    <option value=9867>&#9867;</option>
    <option value=9868>&#9868;</option>
    <option value=9869>&#9869;</option>
    <option value=9870>&#9870;</option>
    <option value=9871>&#9871;</option>
    <option value=9872>&#9872;</option>
    <option value=9873>&#9873;</option>
    <option value=9874>&#9874;</option>
    <option value=9875>&#9875;</option>
    <option value=9876>&#9876;</option>
    <option value=9877>&#9877;</option>
    <option value=9878>&#9878;</option>
    <option value=9879>&#9879;</option>
    <option value=9880>&#9880;</option>
    <option value=9881>&#9881;</option>
    <option value=9882>&#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>