如何在bootstrap 3导航栏中响应select2 v4搜索框？

Question

我在selectstrap 3导航栏中放置了select2搜索框.问题是当我调整浏览器大小时,搜索框不会自动调整大小,导航栏最终会溢出.目前尚不清楚如何使select2盒响应.

请看这里:https://jsfiddle.net/vgoklani/3vtrgkc7/13/

您必须在jsfiddle中调整Result窗口的大小.如果宽度不够长,则隐藏搜索框,并且不会显示.我希望搜索框能够响应,以便根据窗口的宽度调整宽度.

    <nav class="navbar navbar-dark navbar-fixed-top">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                    <i class="fa fa-chevron-down fa-2x" style="font-size: 16px;color:#fff"></i>
                </button>
                <a class="navbar-brand">NAME</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search1" multiple="multiple" id="Search1" style="width:400px;height:34px"></select>
                    </div>
                </form>

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search2" multiple="multiple" id="Search2" style="width:400px;height:34px"></select>
                    </div>
                </form>

            </div>
        </div>
    </nav>

谢谢

Answer 1

我不确定你想要做什么.

你能试试这个:

@media screen and (max-width: 767px) {
    .select2 {
        width: 100% !important;
    }
}

Answer 2

这对我有用:

$(window).resize(function() {
    $('.select2').css('width', "100%");
});

Answer 3

您可以通过设置data-*属性来解决此问题:

<select id="select2" class="form-control" data-width="100%">
    ...
</select>

Answer 4

我正在使用select 2版本4,带有bootstrap 3,select 2响应没有代码.

请注意,如果您使用选择2打开页面并调整其大小,则选择2大小将不会更改,您可能认为它没有响应.如果以新的大小刷新页面,您会看到选择2将正确适合页面.

这是因为select 2会在文档完成时呈现其组件并计算大小,而在调整页面大小时不会刷新它们.这是完全可以接受的,因为我们不希望最终用户改变其浏览器大小(这是我们在开发测试期间通常所做的!)

根据我的经验,如果您手动更改选择2宽度,您可能会发现select2下拉列表不能完全适合选择容器的顶部或按钮的情况.

需要一些css的唯一情况是当您的网站被移动设备浏览时,用户可以通过旋转移动设备来旋转屏幕.

在下面这个css可能会有所帮助,因为它会通过考虑bootstrap列来调整select 2的大小:

/*Make select2 responsive*/
[class*="col-"] .select2-container {
    width:100%!important;
}
[class*="col-"] .select2-container .select2-search input[type="text"] {
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;
}
[class*="col-"] .select2-container .select2-drop {
    width: 100%!important;
}

Answer 5

必须尝试应用于col-输入字段吗？像这样"multiple" id="Search1" style="height:34px"></select>