twitter-bootstrap-3 - 与光滑滑块一起使用时，Bootstrap 选择下拉菜单会失真

Question

当使用带有光滑滑块的Bootstrap 选择下拉菜单时，它会失真。

这是jsfiddle的链接。HTML 代码：

<div class="slider">
<select name="test" multiple="" class="selectpicker">
  <option value="Created" data-subtext="">Created (91)</option>
  <option value="Approved" data-subtext="">Approved (6038)</option>
  <option value="Completed" data-subtext="">Completed (477)</option>
   <option value="Held" data-subtext="">Held (54)</option>
   <option value="Rejected" data-subtext="">Rejected (4)</option>
   <option value="Cancelled" data-subtext="">Cancelled (71)</option>
   <option value="Authorized" data-subtext="">Authorized (1)</option>
</select>
<select name="test" multiple="" class="selectpicker">
  <option value="Created" data-subtext="">Created (91)</option>
  <option value="Approved" data-subtext="">Approved (6038)</option>
  <option value="Completed" data-subtext="">Completed (477)</option>
   <option value="Held" data-subtext="">Held (54)</option>
   <option value="Rejected" data-subtext="">Rejected (4)</option>
   <option value="Cancelled" data-subtext="">Cancelled (71)</option>
   <option value="Authorized" data-subtext="">Authorized (1)</option>
</select>
<select name="test" multiple="" class="selectpicker">
  <option value="Created" data-subtext="">Created (91)</option>
  <option value="Approved" data-subtext="">Approved (6038)</option>
  <option value="Completed" data-subtext="">Completed (477)</option>
   <option value="Held" data-subtext="">Held (54)</option>
   <option value="Rejected" data-subtext="">Rejected (4)</option>
   <option value="Cancelled" data-subtext="">Cancelled (71)</option>
   <option value="Authorized" data-subtext="">Authorized (1)</option>
</select>
</div>

JS代码

// A $( document ).ready() block.
$( document ).ready(function() {
    var slickEle = jQuery(".slider").slick();
    slickEle.slick({
      dots: false,
      infinite: false,
      variableWidth: true,
      slidesToShow: 3,
      slidesToScroll: 1,
      touchMove : true,
      mobileFirst: true
    })
});

重现问题的步骤

单击它会扭曲的选择框。

预期的行为是什么？

没有光滑：

什么是观察到的行为？

使用光滑：

==================================================== ===================

有没有人对此有任何解决方案？

提前致谢

标签： twitter-bootstrap-3slick.js

Answer 1

我也在 bootstrap-select 问题跟踪器上发布了这个问题：#2314。正如凯西霍尔泽回答的那样：

您需要设置容器：'body' 或 data-container="body"。 https://developer.snapappointments.com/bootstrap-select/examples/#container

根据容器文档：

将选择菜单附加到特定元素，例如容器：'body' 或 data-container=".main-content"。如果选择元素位于具有溢出：隐藏的元素内，这将很有用。

Select 元素在 slick-list 中，它设置overflow: hidden为只有当前幻灯片可见，所以当我们设置 container: body 时它可以工作。

这是工作小提琴：https ://jsfiddle.net/iamaditya/01ncvrbj/4/

感谢您的回复:)