twitter-bootstrap – 如何使引导程序3导航栏中的select2 v4搜索

发布时间：2020-12-18 00:19:05 所属栏目：安全来源：网络整理

导读：我已经将select2搜索框放在引导3导航栏中.问题是当我调整浏览器的大小时,搜索框不会自动调整大小,导航栏最终会溢出.不清楚如何使选择框响应. 请看这里：https://jsfiddle.net/vgoklani/3vtrgkc7/13/ 您将不得不在jsfiddle中调整Result窗口大小.如果宽度不够

我已经将select2搜索框放在引导3导航栏中.问题是当我调整浏览器的大小时,搜索框不会自动调整大小,导航栏最终会溢出.不清楚如何使选择框响应.

请看这里：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>

谢谢

解决方法

我不知道你想做什么.

你可以试试这个：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!