【发布时间】：2018-04-06 19:42:06
【问题描述】：
在 Bootstrap 方面我有点新手，我正在努力让一些表单字段符合我想要的布局。我的 HTML 代码示例 sn-p 在这里：
<!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 没有这个问题。
【问题讨论】：
-
请在代码中添加起点（JSFiddle 或 CodePen），另见stackoverflow.com/help/mcve
-
不知道为什么你认为我需要指出一个“起点”。我的示例是最小的、完整的和可验证的。
-
当我检查这个问题时，HTML 不存在（未加载？）。现在都好了，给您添麻烦了。
标签： html twitter-bootstrap twitter-bootstrap-3 form-layout