Question

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

由于我使用的是多选引导插件，因此al Select元素将转换为列表。

我有什么：

Screenshot 1

这就是我想要实现的目标

Screenshot 2

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

这是原始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;
}

Answer 2

编辑：没有看到您的图片示例。以下是使用弹性框（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）的方法。

编辑2：看看这个小提琴：https://jsfiddle.net/e9pmcj6g/2/

所以，尝试应用这个css：

ul.multiselect-container.dropdown-menu {
    height: 9em; // 3 times the height of your li elements
    display: flex;
    flex-flow: column wrap;
}

ul.multiselect-container.dropdown-menu li {
    height: 2em;
    margin: 0.5em 0;
}

Answer 3

也许是这样的：https://jsfiddle.net/bxo5qcbq/（非常糟糕的例子）

所以只需在您的选项中添加类。在我的情况下，我添加了Bootstrap类pull-left和pull-right。

制作下一行＆＃34; row＆＃34; - 使用分隔符添加空选项或选项。

<option value="1" class="pull-left">Val 1</option>
<option value="2" class="pull-right">Val 2</option>

内部的内联选项元素使用bootstrap选择

3 个答案: