Select drop down does not work in mobile device when apply bootstrap

Question

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?

Solution

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/

Comments

[andrebruton]

What changed? What was the code causing the problem that caused it not to work? I have the same problem with a Bootstrap template (Arilla) that I bought that doesn't work on a mobile device.

[Kamal]

you missing class="form-control"

[dhiraj]

I tried to add the "form-control" class as suggested. Still not working!