I'm a bit of a novice when it comes to Bootstrap and I'm struggling to get some form fields to conform to my desired layout. My sample snippet of HTML code is here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<form id="frmRegister" class="form-horizontal">
<div id="divContainer" class="container-fluid" style="width: 90%">
<h2 id="h2Registration" style="background-color: #F76803; color: white; margin: 3px 3px 3px 3px"></h2>
<div id="divChild1">
<div class="form-group">
<label for="txtChildLastName1" class="control-label col-xs-1">Last Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildLastName1" maxlength="25" />
</div>
<label for="txtChildFirstName1" class="control-label col-xs-1">First Name *</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtChildFirstName1" maxlength="25" />
</div>
<label for="txtChildMiddleInit1" class="control-label col-xs-1">Initial</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildMiddleInit1" maxlength="1" />
</div>
<label for="txtChildSuffix1" class="control-label col-xs-1">Suffix</label>
<div class="col-xs-1">
<input type="text" class="form-control" id="txtChildSuffix1" maxlength="5" />
</div>
</div>
<div class="form-group">
<label for="groupGender" class="control-label col-xs-1">Gender *</label>
<div class="col-xs-2">
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderMale1" value="M" />Male
</label>
<label class="radio-inline">
<input type="radio" name="groupGender1" id="rbGenderFemale1" value="F" />Female
</label>
</div>
<label for="txtChildDOB1" class="control-label col-xs-1">DOB *</label>
<div class="col-xs-1">
<input type="date" class="form-control dateTextBox" style="position: absolute; z-index: 999" id="txtChildDOB1" name="txtChildDOB1" value="" />
</div>
<label for="txtDoctorName1" class="control-label col-xs-1">Doctor Name</label>
<div class="col-xs-3">
<input type="text" class="form-control" id="txtDoctorName1" maxlength="50" />
</div>
<label for="txtDoctorPhone1" class="control-label col-xs-1">Doctor Phone</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtDoctorPhone1" maxlength="50" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteDues1" class="control-label col-xs-1">Registration Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtAthleteDues1" placeholder="85" maxlength="2" />
</div>
<label for="txtUniform1" class="control-label col-xs-1">Uniform</label>
<div class="col-xs-2">
<input type="text" class="form-control" id="txtUniform1" maxlength="50" placeholder="Estimate size, if needed" />
</div>
<label for="txtUniformFee1" class="control-label col-xs-1">Uniform Fee</label>
<div class="col-xs-1 input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="txtUniformFee1" placeholder="80" maxlength="2" />
</div>
</div>
<div class="form-group">
<label for="txtAthleteFees1" class="control-label col-xs-1">Athlete Fees</label>
<div class="col-xs-11">
<input type="text" class="form-control" id="txtAthleteFees1" disabled="disabled" value="Some descriptive text goes here" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
The culprit appears to be my use of the input-group/input-group-addon classes which prepend the field with the dollar sign (Registration Fee). The result is that the subsequent fields for Uniform and Uniform Fee wrap to the next row rather than appearing inline on the same row with Registration Fee. The first two rows, which don't use input-group/input-group-addon do not have this problem.
Instead of using col-* and input group together, put the input-group inside the col-* like this..
<div class="col-xs-1">
<div class="input-group">
<div class="input-group-addon"> .. </div>