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

Question

我有一个相当复杂的 Bootstrap 3 个表格选项卡组，其中填充了在桌面宽度下工作正常的组合框，但在移动设备上，组合框被冻结或无法显示下拉列表.

这是选项卡组中嵌入的四个表单中的第一个...

         <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">[=11=]-0k</option>
                    <option value="100-175">0k-5k</option>
                    <option value="175-250" selected>5k-0k</option>
                    <option value="250-325">0k-5k</option>
                    <option value="325-400">5k-0k</option>
                    <option value="400-500">0k-0k</option>
                    <option value="500-600">0k-0k</option>
                    <option value="600-750">0k-0k</option>
                    <option value="750-900">0k-0k</option>
                    <option value="900-1100">0k-.1m</option>
                    <option value="1100-1500">.1m-.5m</option>
                    <option value="1500-100000">.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>

这是显示问题的快捷方式 fiddle。

https://jsfiddle.net/edkwudy9/

请注意，如果您将宽度拉得足够宽，得到 6 列（Bootstrap 中的 col-md-2），下拉菜单工作得很好，但是当您将宽度缩小到 col-sm 时-6 col-xs-6，它们停止工作。

我只是不知道可能出了什么问题，而且我正在为这个问题度过无法计费的时间，就像没有人管事一样。

我是一名后端开发人员，自己被困在这个项目中，现在发现自己在调试 BS3 和移动设备时有些不知所措。

实际的开发站点以查看操作中的控件...

http://webwarephpdevelopment.com:8080/index.php

Answer 1

这是因为您需要在 .row class 中嵌套 col 调用，以便它们可以正确清除浮动。

在组合框之后，行 <div clas="row text-center"><div class="col-md-12>" 将覆盖在其他字段之上。将它们添加到其上方或将 style="clear:both" 添加到行列。

Here's a working demo in fiddle

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

Bootstrap 3 combo boxes stop working in mobile views

css

tabs

combobox

responsive-design

twitter-bootstrap