Я разместил поля поиска select2 внутри бутстрапа 3 navbar. Проблема в том, что когда я изменяю размер браузера, окна поиска не изменяются автоматически, и навигационная панель заканчивается переполнением. Не ясно, как сделать модули 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>
благодаря