我已经将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;
}
}