Css Bootstrap 3组合框在移动视图中停止工作

Css Bootstrap 3组合框在移动视图中停止工作,css,twitter-bootstrap,combobox,responsive-design,tabs,Css,Twitter Bootstrap,Combobox,Responsive Design,Tabs,我有一个相当复杂的bootstrap3选项卡组,其中填充了组合框,这些组合框在桌面宽度下可以正常工作,但在移动设备中,组合框被冻结或其他什么东西,并且不会显示下拉列表 以下是选项卡组中嵌入的四个表单中的第一个 <form role="form" id="prop-search" name="prop-search" method="get" target="_blank" action="search.php"> <input

我有一个相当复杂的bootstrap3选项卡组,其中填充了组合框,这些组合框在桌面宽度下可以正常工作,但在移动设备中,组合框被冻结或其他什么东西,并且不会显示下拉列表

以下是选项卡组中嵌入的四个表单中的第一个

         <form role="form" id="prop-search"  name="prop-search" method="get" target="_blank" action="search.php">

              <input type="hidden" name="searchtype" value="Residential">



              <div class="col-md-2 col-sm-6 col-xs-6">      
                <div class="form-group">
                  <label for="location">City</label>
                  <select class="form-control" id="area" name="area">

                    <?php
                      $action=basename(__FILE__, '.php');               // load action from filename for consistancy 
                      $controller = new retsController($action . '-cities'); // register controller with page action and parameter
                      $controller->invoke();                            // invokde controller to get view
                    ?>     

                  </select>
                </div>
              </div>

              <div class="col-md-2 col-sm-6 col-xs-6">
                <div class="form-group">
                  <label for="type">Type</label>
                  <select class="form-control" id="proptype"  name="proptype">
                    <option selected>House</option>
                    <option>Condo</option>
                    <option>Townhome</option>                    
                  </select>
                </div>
              </div>

              <div class="col-md-2 col-sm-6 col-xs-6">
                <div class="form-group">
                  <label for="bathroom">Baths</label>
                  <select class="form-control" id="baths" name="baths">
                    <option>1</option>
                    <option selected>2</option>
                    <option>3</option>
                    <option>4+</option>
                  </select>
                </div>
              </div>
              <div class="col-md-2 col-sm-6 col-xs-6">
                <div class="form-group">
                  <label for="bedroom">Beds</label>
                  <select class="form-control" id="beds" name="beds">
                    <option>1</option>
                    <option>2</option>
                    <option selected>3</option>
                    <option>4+</option>
                  </select>
                </div>
              </div>

              <div class="col-md-2 col-sm-6 col-xs-6">
                <div class="form-group">
                  <label for="minprice">$-Range</label>
                  <select class="form-control" id="pricerange" name="pricerange">
                    <option value="0-100">$0-$100k</option>
                    <option value="100-175">$100k-$175k</option>
                    <option value="175-250" selected>$175k-$250k</option>
                    <option value="250-325">$250k-$325k</option>
                    <option value="325-400">$325k-$400k</option>
                    <option value="400-500">$400k-$500k</option>
                    <option value="500-600">$500k-$600k</option>
                    <option value="600-750">$600k-$750k</option>
                    <option value="750-900">$750k-$900k</option>
                    <option value="900-1100">$900k-$1.1m</option>
                    <option value="1100-1500">$1.1m-$1.5m</option>
                    <option value="1500-100000">$1.5m+</option>              
                  </select>
                </div>
              </div>
            <!--  </div>

              <div class="col-md-2 col-sm-2 col-xs-3">  -->

              <div class="row text-center">
                <div class="col-md-12">
                  <div class="form-group">     
                  <!-- <label for="submit">&nbsp;</label>   -->
                    <input type="submit" name="submit" value="search" class="btn btn-default btn-block">  
                  </div>                     
                </div>
              </div>

            </form>
这是一把快速而肮脏的小提琴,显示了问题所在

请注意,如果将宽度拉得足够宽,在引导中得到6列col-md-2,则下拉列表可以正常工作,但如果将宽度缩小到col-sm-6 col-xs-6,则下拉列表将停止工作

我只是不知道会出什么问题,我在这个问题上像没人做生意一样焦头烂额

我是一名后端开发人员,参与了这个项目,现在发现自己在调试BS3和mobile时有些不知所措

要查看正在运行的控件的实际开发人员站点


这是因为您需要在.row类中嵌套col调用,以便它们能够正确地清除浮动


在组合框之后,行友好提示:在将来,请尝试创建一个。这里有很多代码,这使得它很难通过。理想情况下,您应该花一些时间获取重现问题所需的代码,并将其配对,直到只有几个可能的字段。在这个过程中,你甚至可以自己解决问题。另见:。哦,非常感谢……如果有办法给你小费,我会送你几瓶手工啤酒: