Platz zwischen Auswahlboxen basierend Bootstrap

Question

Ich entwickle eine responsive Form.
Ich habe 3 auswählen.
Desktop-Ansicht:

Mobilansicht:

Ich möchte mehr Platz in der mobilen Ansicht zwischen dem wählt.
Wie kann ich das tun? meine HTML
hier:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="row"> 
 
          <div class="hidden-xs col-md-2" style="width:9.8%"> 
 
           <label for="nose">choose:</label> 
 
          </div> 
 
          <div class="col-xs-12 col-md-2" > 
 
           <select class="form-control" > 
 
            <option value="1">aaaaaaaaa</option> 
 
           </select> 
 
          </div> 
 
          <div class="col-xs-12 col-sm-12 col-md-2" > 
 
           <select class="form-control"> 
 
            <option value="1">bbbbbbbbb</option> 
 
            
 

 
           </select> 
 
           
 
          </div> 
 
          <div class="col-xs-12 col-md-2" > 
 
           <select class="form-control"> 
 
            <option value="1">cccccccccc</option> 
 
           </select> 
 
           
 
          </div> 
 
           
 
         </div>

Answer 1

Mit Medien abfragt, können Sie nur einige margin-bottom wie so zu jedem Element hinzufügen:

@media screen and (max-width: 1280px) { 
 
    .col-xs-12 .col-md-2 { 
 
     margin-bottom : 5px; 
 
    } 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="row"> 
 
     <div class="hidden-xs col-md-2" style="width:9.8%"> 
 
      <label for="nose">choose:</label> 
 
     </div> 
 
     <div class="col-xs-12 col-md-2" > 
 
      <select class="form-control" > 
 
       <option value="1">aaaaaaaaa</option> 
 
      </select> 
 
     </div> 
 
     <div class="col-xs-12 col-sm-12 col-md-2" > 
 
      <select class="form-control"> 
 
       <option value="1">bbbbbbbbb</option> 
 

 

 
      </select> 
 

 
     </div> 
 
     <div class="col-xs-12 col-md-2" > 
 
      <select class="form-control"> 
 
       <option value="1">cccccccccc</option> 
 
      </select> 
 

 
     </div> 
 

 
</div>

Answer 2

margin-bottom: 5px; in der mobilen Ansicht CSS hinzufügen Tag auswählen oder eine andere Klasse mit margin-bottom:5px erstellen und zu Dropdown-Listen hinzuzufügen.

select 
{ 
    margin-bottom:5px; 
} 

Oder

.selectmargin 
    { 
     margin-bottom:5px; 
    } 

Answer 3

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="row"> 
 
          <div class="hidden-xs col-md-2" style="width:9.8%"> 
 
           <label for="nose">choose:</label> 
 
          </div> 
 
\t \t \t \t \t \t \t </br></br></br> 
 
          <div class="col-xs-12 col-md-2" style="padding-bottom: 1cm;"> 
 
           <select class="form-control" > 
 
            <option value="1">aaaaaaaaa</option> 
 
           </select> 
 
          </div> 
 
\t \t \t \t \t \t \t 
 
          <div class="col-xs-12 col-sm-12 col-md-2" style="padding-bottom: 1cm;"> 
 
           <select class="form-control"> 
 
            <option value="1">bbbbbbbbb</option> 
 
            
 

 
           </select> 
 
           
 
          </div> 
 
\t \t \t \t \t \t 
 
          <div class="col-xs-12 col-md-2" style="padding-bottom: 1cm;"> 
 
           <select class="form-control"> 
 
            <option value="1">cccccccccc</option> 
 
           </select> 
 
           
 
          </div> 
 
           
 
         </div> 
 
\t \t \t \t \t </br>

Hier ist Ihre Antwort ....