Clever Geek Handbook

Dropdown menu does not work on mobile when using bootstrap

I am using html select in bootstrap col , but when I click the drop down button on mobile (iOS and Android), it cannot display the list of options. But it works in PC browser. The html code looks like this:

<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 the class "col-xs-6 col-sm-6 col-md-6" from the div, select Select from the dropdown menu.

So what's the problem? How can I get it to work?

+3


source to share


1 answer


Try to use this like

<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/

+4


source






More articles:


All Articles