Twitter bootstrap 3 在bootstrap 3中堆叠时,输入字段变得不可用

Twitter bootstrap 3 在bootstrap 3中堆叠时,输入字段变得不可用,twitter-bootstrap-3,responsive-design,Twitter Bootstrap 3,Responsive Design,我正在设计这样一个视图: @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

我正在设计这样一个视图:

     @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范围时,输入字段确实会堆叠起来,但变得不可读取


我不知道为什么会发生这种情况,解决方案是什么,尝试了不同的方法,但都没有效果。

您的代码工作正常Gorostas:我已经将其放入循环中,因此此标记将重复10次,假设存在问题。循环不是问题您有其他css thta是问题,请检查firebug或检查页面上的元素查看全屏视图(例如1000px左右)时此功能正常。但是当我减小浏览器的宽度时…它的堆栈可以正常工作…但所有内容都不可读。这里是另一个示例,您可以全屏使用它,并调整大小: