Bootstrap select 与光滑的滑块一起使用时，下拉菜单会变形

Question

使用 Bootstrap select dropdown with the slick 滑块时，它会变形。

这是 jsfiddle 的 link。 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
    })
});

重现问题的步骤

单击 select 框，它会变形。

预期的行为是什么？

没有光滑：

什么是观察到的行为？

有了 Slick：

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

有人对此有解决方案吗？

提前致谢

Answer 1

添加此样式

 .slick-list {
     overflow: unset;
}

Answer 2

我也在 bootstrap-select 问题跟踪器上发布了问题：#2314。正如 Casey Holzer 的回答：

You need to set container: 'body' or data-container="body". https://developer.snapappointments.com/bootstrap-select/examples/#container

根据容器文档：

Append the select menu to a specific element, e.g. container: 'body' or data-container=".main-content". This is useful if the select element is inside an element with overflow: hidden.

Select 元素位于设置 overflow: hidden 的 slick-list 中，以便只有当前幻灯片可见，因此当我们设置 container: body 时它起作用。

这是工作 fiddle：https://jsfiddle.net/iamaditya/01ncvrbj/4/

感谢您的回复:)

Bootstrap select 与光滑的滑块一起使用时，下拉菜单会变形

Bootstrap select dropdown gets distorted when used with slick slider

twitter-bootstrap-3

slick.js