Question

在Bootstrap中，是否有多个选择两侧的插件？或教程如何在引导程序中创建多选两侧，从右或左移动，向上或向下调整位置。 jQuery中的示例：http://www.stevefenton.co.uk/cmsfiles/assets/File/twosidedmultiselect.html但是如何在bootstrap中？

Answer 1

您可以使用 multiselect.js 。确实使事情变得简单。

With move up/down buttons

$('#multiselect').multiselect();

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/crlcu/multiselect/v2.5.1/dist/js/multiselect.min.js"></script>


<div class="row">
  <div class="col-xs-5">
    <select name="from[]" id="multiselect" class="form-control" size="8" multiple="multiple">
      <option value="1">Item 1</option>
      <option value="2">Item 2</option>
      <option value="3">Item 3</option>
      <option value="4">Item 4</option>
      <option value="5">Item 5</option>
    </select>
  </div>

  <div class="col-xs-2">
    <button type="button" id="multiselect_rightAll" class="btn btn-block"><i class="glyphicon glyphicon-forward"></i></button>
    <button type="button" id="multiselect_rightSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-right"></i></button>
    <button type="button" id="multiselect_leftSelected" class="btn btn-block"><i class="glyphicon glyphicon-chevron-left"></i></button>
    <button type="button" id="multiselect_leftAll" class="btn btn-block"><i class="glyphicon glyphicon-backward"></i></button>
  </div>

  <div class="col-xs-5">
    <select name="to[]" id="multiselect_to" class="form-control" size="8" multiple="multiple"></select>

    <div class="row">
      <div class="col-xs-6">
        <button type="button" id="multiselect_move_up" class="btn btn-block"><i class="glyphicon glyphicon-arrow-up"></i></button>
      </div>
      <div class="col-xs-6">
        <button type="button" id="multiselect_move_down" class="btn btn-block col-sm-6"><i class="glyphicon glyphicon-arrow-down"></i></button>
      </div>
    </div>
  </div>
</div>

Answer 2

bootstrap网站上有您需要的文档：

http://twitter.github.com/bootstrap/base-css.html#forms

查看内联复选框，内联表单或者甚至只使用boostrap span *来排列您的选择项目，例如

<div class="row">

<div class="span1">select item 1</div>
<div class="span1">select item 2</div>

</div>

这会在两个span1 div中并排排列两个项目。

Bootstrap Multiple选择双面

2 个答案: