javascript - 使用 Bootstrap 在 Select 中内联选项元素

Question

我想要内联 Select option 元素，因为有很多数据，如果 option 元素与 select 元素的宽度内联会更好。

由于我使用的是多选 Bootstrap 插件，所有选择元素都被转换为列表。

我有什么:

这就是我想要实现的目标

我的问题是我可以使用 Bootstrap 内联 Select 选项元素吗？

这是原始的 HTML 代码:

<select id="food" multiple="multiple" class="mutlival">
                                <option value="cheese">Cheese</option>
                                <option value="tomatoes">Tomatoes</option>
                                <option value="mozarella">Mozzarella</option>
                                <option value="mushrooms">Mushrooms</option>
                                <option value="pepperoni">Pepperoni</option>
                                <option value="onions">Onions</option>
                            </select> 

在 bootstrap 发挥他的魔力之后，作为输出我得到了这个:

<div class="btn-group">
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected">
    None selected 
    <b class="caret">
    </b>
  </button>
  <ul class="multiselect-container dropdown-menu">
    <li class="multiselect-item multiselect-all">
      <a href="javascript:void(0);" class="multiselect-all">
        <label class="checkbox">
          <input type="checkbox" name="multiselect" value="multiselect-all">
          Select all
        </label>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);">
        <label class="checkbox">
          <input type="checkbox" name="multiselect" value="cheese">
          Cheese
        </label>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);">
        <label class="checkbox">
          <input type="checkbox" name="multiselect" value="tomatoes">
          Tomatoes
        </label>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);">
        <label class="checkbox">
          <input type="checkbox" name="multiselect" value="mozarella">
          Mozzarella
        </label>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);">
        <label class="checkbox">
          <input type="checkbox" name="multiselect" value="mushrooms">
          Mushrooms
        </label>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);">
        <label class="checkbox">
          <input type="checkbox" name="multiselect" value="pepperoni">
          Pepperoni
        </label>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);">
        <label class="checkbox">
          <input type="checkbox" name="multiselect" value="onions">
          Onions
        </label>
      </a>
    </li>
  </ul>
</div> 

Answer 1

如果我正确理解您的问题，我认为这就是您想要的:http://jsfiddle.net/ec1469e1/

基本上我所做的是针对 ul 并摆脱绝对定位(bootstrap 默认值)并为其提供基于百分比的宽度。然后你所要做的就是告诉 li 元素是 inline-block 一切看起来都不错!

ul.multiselect-container.dropdown-menu {
  width: 70%;
  clear: both;
  position: relative;
}

ul.multiselect-container.dropdown-menu li {
  display: inline-block;
}