Bootstrap 3 的表单字段布局问题

Question

我在 Bootstrap 方面有点新手，我正在努力让一些表单字段符合我想要的布局。我的 HTML 代码示例片段在这里：

<!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>

罪魁祸首似乎是我使用 input-group/input-group-addon 类，它在字段前加上美元符号（注册费）。结果是 Uniform 和 Uniform Fee 的后续字段换行到下一行，而不是出现在与 Registration Fee 相同的行中。不使用 input-group/input-group-addon 的前两行没有这个问题。

Answer 1

而不是一起使用 col-* 和 input group，而是像这样将 input-group 放在 col-* 中..

<div class="col-xs-1">
   <div class="input-group">
      <div class="input-group-addon"> .. </div>

http://www.bootply.com/g6rtaYL4fy

Bootstrap 3 的表单字段布局问题

Form field layout issue with Bootstrap 3

html

form-layout

twitter-bootstrap

twitter-bootstrap-3