在引导程序3中堆叠时，输入字段变得不可用

Question

我正在设计一个这样的视图：

     @for($i=1;$i<=10;$i++)
     <div class="col-xs-12">
             <label class="control-label">Home</label>
             <select  class="form-control" name="homeTeam" >
                  <option value="1">Arsenal</option>
                  <option value="2">Chelsea</option>
                  <option value="3">Man Utd</option>

             </select>
     </div>
     <div class="col-xs-12">
             <label class="control-label">Away</label>
             <select  class="form-control" name="awayTeam" >
                  <option value="1">Arsenal</option>
                  <option value="2">Chelsea</option>
                  <option value="3">Man Utd</option>

             </select>
     </div>
     <div class="col-xs-12">
              <label class="control-label">Kick-Off</label>
              <input class="form-control form_datetime col-xs-12" size="16" type="text" value="" readonly>
     </div>
   @endfor

当我在正常显示器上以足够的宽度测试时，它可以正常工作。但是当我减小浏览器的大小以匹配col-xs范围时，输入字段会堆叠起来但变得无法点击。

我不确定为什么会发生这种情况，并且解决方案是什么，尝试过不同的事情没有任何效果。