javascript - Slick Carousel - 容器宽度不起作用

Question

我已经开始在我正在使用的网站上使用 Slick Carousel 插件，并且出于某种原因，如果我在 Slick Carousel 的目标元素周围设置一个包装器，除非我将其设置为像素，否则宽度不会被接受当我需要宽度仅增长到父元素的大小时，这不是一个选项。

如果这有帮助，我也在使用 Bootstrap。

HTML

<div class="col-md-6 col-xs-12">
<div class="group-filter">
    <span class="title">Group Filter</span>
    <div class="group-slick-cell">
        <div class="group-slick-wrapper">
            <div class="group-slick">
                <div><button class="btn btn-groups">Group 1</button></div>
                <div><button class="btn btn-groups">Group 2 more text</button></div>
                <div><button class="btn btn-groups">Group 3</button></div>
                <div><button class="btn btn-groups">Group 4 text</button></div>
            </div>
        </div>
    </div>
</div>

减少:

.group-filter {
    display: table;
    width: 100%;

    .title {
        display: table-cell;
        font-size: 16px;
        color: @text-color;
        padding: 0 5px;
        vertical-align: middle;
        width: 1%;
    }

    .group-slick-cell {
        display: table-cell;
        width: 100%;
        height: 31px;

        .group-slick-wrapper {
            margin-left: 17px;
            width: 100%

            .btn {
                margin: 0 5px;
            }
        }
    }
}

JS:

groupSlick.slick({
    infinite: true,
    dots: false,
    speed: 200,
    slidesToShow: 3,
    slidesToScroll: 1,
    variableWidth: true,
    centerMode: true,
    draggable: false,
    accessibility: false
});

这是实际问题的 JSFiddle。父容器的子容器将宽度推到 20,000px，这比 Bootstrap 应该达到的宽度要宽。

https://jsfiddle.net/wqvth9ms/

Answer 1

对于可能正在寻找与此类似的修复程序的人，我在下面创建了对原始 jsFiddle 的更新，它可能会帮助您。

我将 display: table-cell 更改为 float: left 并将 table-layout: fixed 添加到包装元素.

https://jsfiddle.net/wqvth9ms/1/