I try to align select and input in one line, but it turns out crooked. How to be? Or do you need to write css yourself?

enter image description here

div#sample_div { width: 250px; float: left; padding-left: 30px; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div id="sample_div"> <form> <div class="form-group field-middle_name"> <div class="col-sm-7 row"> <select name="prefix_id" id="prefix_id" class="form-control" title="Префикс" required="required"> <option value="">Префикс</option> </select> </div> <div class="col-sm-8 row"> <input type="number" name="sample_number" id="sample_number" class="form-control" placeholder="Номер" title="Номер образца" required="required"> </div> </div> <div class="help-block row"></div> </form> </div>

  • Contact the bootstrap tech support, they will write you a css - mJeevas

1 answer 1

  <div id="sample_div"> <form> <div class="form-group field-middle_name row"> <div class="col-sm-6 col-md-6 col-xs-6 no-padding"> <select name="prefix_id" id="prefix_id" class="form-control" title="Префикс" required="required"> <option value="">Префикс</option> </select> </div> <div class="col-sm-6 col-md-6 col-xs-6 no-padding"> <input type="number" name="sample_number" id="sample_number" class="form-control" placeholder="Номер" title="Номер образца" required="required"> </div> </div> <div class="help-block row"></div> </form> </div> .no-padding{ padding-right: 0; padding-left: 0; }
  • i.imgur.com/LeaeQgb.png And so that they occupy the entire width? - n.osennij
  • add no-padding divs and .no-padding {padding-right: 0; padding-left: 0; } - sergey - dev
  • Thanks for the answer. Everything is working. - n.osennij