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

Question

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

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

您将不得不在 jsfiddle 中调整结果窗口的大小。如果宽度不够长，搜索框将被隐藏，并且不会显示。我想要的是搜索框能够响应，以便它们的宽度根据窗口的宽度调整大小。

    <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;
    }
}