html - Space between selection boxes based bootstrap -
i'm developing responsive form.
have 3 select.
desktop view:
i want more space in mobile view between selects.
how can this?
here html:
<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>
using media queries, add margin-bottom each element :
@media screen , (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> 
Comments
Post a Comment