引导表单对齐问题

Question

Trying to align two form elements side by side to create an hours per week field

eg

Hours per week (box here) - (box here)

but when I use two col-md-2 with a - between them I get the result of

Hours per week (box here) (box here) -

Anyone have a solution to display the - between the two boxes? I've tried using 3 col-md-1 but the alignment gets all out of whack!

Answer 1

The below code follows Bootstrap form construction. Using .input-group allows you to nest .input-group-addon between to fields with the .form-control class - though you do need to specify a width (hence the .col-xs-9 ).

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form> <div class="form-group"> <label class="col-xs-3 control-label" for="HoursPerWeek">Hours Per Week</label> <div class="col-xs-9"> <div class="input-group"> <input type="text" id="BoxOne" class="form-control"> <span class="input-group-addon">-</span> <input type="text" id="BoxTwo" class="form-control"> </div> </div> </div> </form> 

Answer 2

Solution without the bootstrap grid

  <form class="inline"> <div> <label for="HoursPerWeek">Hours Per Week</label> <input type="text" id="BoxOne"> <label for="#">-</label> <input type="text" id="BoxTwo"> </div> </form> 

Solution using the bootstrap grid

  <form> <div class="form-group"> <label class="col-md-3" for="HoursPerWeek">Hours Per Week</label> <input class="col-md-3" type="text" id="BoxOne"> <label class="col-md-3" for="#">-</label> <input class="col-md-3" type="text" id="BoxTwo"> </div> </form>