窗口较小时选择重叠形式

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}