当与滑块一起使用时，引导选择下拉菜单会被扭曲。

Question

当与引导选择滑块一起使用圆滑下拉时，它会被扭曲。

这是链接 to 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
    })
});

重现问题的步骤

点击它被扭曲的复选框。

​

预期的行为是什么？

没有浮华的：

​

什么是观察到的行为？

圆滑的：

​

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

有谁能解决这个问题吗？

提前感谢

Answer 1

我还在引导-选择问题跟踪器上发布了这个问题：#2314。正如凯西·霍尔泽所回答的

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

根据集装箱文件：

将select菜单附加到特定的元素，例如容器：'body‘或数据容器=“..main content”。如果select元素位于溢出:隐藏的元素中，这是非常有用的。

Select元素在slick中，它设置了overflow: hidden，这样只有当前的幻灯片是可见的，所以当我们设置容器:主体时，它可以工作。

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

(谢谢你的答复:)

Answer 2

添加此样式

 .slick-list {
     overflow: unset;
}