Форма перекрытия выбирается, когда окно маленькое

Question

У меня есть следующие поля выбора, которые работают с select2 js:

<!-- Selections for the table -->
<div class="form-group row">
  <div class="col-xs-2">
    <label for="month" class="control-label">Year</label>
    <select class="form-control select2" id="year" name="year" data-placeholder="Select a year">
        <option value="2015">
            xxx
        </option>
        ...
    </select>
  </div>
  <div class="col-xs-2">
    <label for="manager" class="control-label">Manager</label>
    <select class="form-control select2" id="manager" name="manager" data-placeholder="Select a manager" multiple="multiple">
        <option value="2">
            xxx
      </option>
      ...
    </select>
  </div>
  <div class="col-xs-2">
    <label for="user" class="control-label">User</label>
    <select class="form-control select2" id="user" name="user" data-placeholder="Select a user" multiple="multiple">
        <option value="87">
            xxx
        </option>
        ...
    </select>
  </div>
</div>

Я использую загрузчик 3, и это странно, когда я получаю меньшее окно, окна перекрываются :(. Вы можетесм. это на изображении ниже.

Как я могу иметь начальную загрузку, чтобы различные селекторы становились ниже друг друга, когда не хватает места, и в строке, если достаточнопространство по горизонтали?

Answer 1

Используйте ниже CSS:

.select2{width:100%}

, если это не работает, вы можете использовать:

.select2{width:100% !important}