如何使用 Bootstrap Dual Listbox 插件重新定位按钮？

Question

我正在使用 Bootstrap Dual Listbox 插件。功能完美，但我希望选择按钮位于两个框的中间。

现在是这样的：

这就是我想要的样子：

我在插件中找不到任何允许我执行此操作的属性。我该怎么做才能修改 UI 使其看起来像上图？

Jfiddle: https://jsfiddle.net/264dLepx/2/

HTML:

<div>
<select id="myListbox" multiple="multiple">
  <option val="1">Option1</option>
  <option val="2">Option2</option>
  <option val="3">Option3</option>
  <option val="4">Option4</option>
  <option val="5">Option5</option>
  <option val="6">Option6</option>
  <option val="7">Option7</option>
  <option val="8">Option8</option>
  <option val="9">Option9</option>
</select>
</div>

Javascript:

window.onload = function () {
  $('#myListbox').bootstrapDualListbox({
    nonSelectedListLabel: 'Available',
    selectedListLabel: 'Selected',
    moveOnSelect: false,
  });
};

Answer 1

我明白了。不得不使用 plug-in 的 getContainer 方法，它允许我自定义生成的 HTML.

代码可能可以改进，它不能完美地调整大小，但在我的情况下做了我需要它做的事情：

JSFiddle：https://jsfiddle.net/b5yL80rq/

JS:

window.onload = function () {
  $('#myListbox').bootstrapDualListbox({
    nonSelectedListLabel: 'Available',
    selectedListLabel: 'Selected',
    moveOnSelect: false,
  });
  
  CustomizeDuallistbox('myListbox');
};

function CustomizeDuallistbox(listboxID) {
  var customSettings = $('#' + listboxID).bootstrapDualListbox('getContainer');
  var buttons = customSettings.find('.btn.moveall, .btn.move, .btn.remove, .btn.removeall');

  customSettings.find('.box1, .box2').removeClass('col-md-6').addClass('col-md-5');
  customSettings.find('.box1').after('<div class="customButtonBox col-md-2 text-center"></div>');
  customSettings.find('.customButtonBox').append(buttons);

  customSettings.find('.btn-group.buttons').remove();
}

CSS:

.bootstrap-duallistbox-container select {
  height: 300px !important;
}

.bootstrap-duallistbox-container .customButtonBox {
  margin-top: auto;
  margin-bottom: auto;
  padding-top: 105px;
}

  .bootstrap-duallistbox-container .customButtonBox button {
    margin-bottom: 15px;
  }

如何使用 Bootstrap Dual Listbox 插件重新定位按钮？

How to reposition buttons with Boostrap Dual Listbox plugin?

html

javascript

css

jquery

bootstrap-duallistbox