选择下拉在应用引导时不能在移动设备中工作 [英] Select drop down does not work in mobile device when apply bootstrap

问题描述

我在引导 col 中使用html select，但是当我点击移动设备（iOS和Android）中的下拉按钮时，它不能显示选项列表。但它工作在PC浏览器。 html代码如下：

 < div class =row> 
< div class =col-xs-6 col-sm-6 col-md-6> 
< select> 
< option value =1> 1< / option> 
< option value =2> 2< / option> 
< option value =3> 3< / option> 
< / select> 
< / div> 
< div class =col-xs-6 col-sm-6 col-md-6> 
< select> 
< option value =a> a< / option> 
< option value =b> b< / option> 
< option value =c> c< / option> 
< / select> 
< / div> 
< / div> 
  

如果我删除那些col-xs-6 col-sm-6 col-md-6类从div，选择下拉在移动设备中工作。

那么问题是什么？

b p $ p> < form role =form>
< div class =form-group>
< div class =col-xs-6 col-sm-6 col-md-6>
< select class =form-control>
< option> 1< / option>
< option> 2< / option>
< option> 3< / option>
< option> 4< / option>
< option> 5< / option>
< / select>
< / div>
< div class =col-xs-6 col-sm-6 col-md-6>
< select class =form-control>
< option> 1< / option>
< option> 2< / option>
< option> 3< / option>
< option> 4< / option>
< option> 5< / option>
< / select>
< / div>
< / div>
< / form>


工作小提琴
http://jsfiddle.net/52VtD/9092/

I'm using html select in the bootstrap col, but when i click drop down button in the mobile device(iOS and Android), it can not display the option list. But it works in the PC browser. The html code is like below:

<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6">
        <select>
            <option value="1">1</option>
            <option value="2">2</option>                
            <option value="3">3</option>   
        </select>
     </div>
     <div class="col-xs-6 col-sm-6 col-md-6">
        <select>
            <option value="a">a</option>
            <option value="b">b</option>                
            <option value="c">c</option>   
        </select>
     </div>
</div>

If i remove those "col-xs-6 col-sm-6 col-md-6" class from div, the select drop down works in the mobile device.

So what's the issue? How can i make it work?

解决方案

Try using like this

<form role="form">
   <div class="form-group">
      <div class="col-xs-6 col-sm-6 col-md-6">     
        <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
        </select>
       </div>
    <div class="col-xs-6 col-sm-6 col-md-6">
      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
      </select>
    </div>
    </div>
</form>

Working fiddle http://jsfiddle.net/52VtD/9092/

这篇关于选择下拉在应用引导时不能在移动设备中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！