jquery - 引导多选两侧

Question

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

Answer 1

您可以使用multiselect.js。它真的让事情变得简单。

带有向上/向下移动按钮

$('#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

引导网站上有您需要的文档：

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 中并排对齐两个项目。