我有一个页面，我使用 bootstrap 创建了它的设计，我有一个问题和一些问题要问，首先，我们可以在 div 中使用 form-group 和行类吗？或者我们应该只使用 form-group？
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<style>
body{
padding: 30px;
}
h4.sub-header{
padding-left:10px;
}
img.logo{
width: 275px;
height: 70px;
}
.main-paragraph{
padding: 30px;
}
#container{
padding: 30px;
}
</style>
</head>
<body>
<header class="container-fluid">
<div class="row">
<div class="col-sm-9"></div>
<div class="col-sm-3">
<h1> HR Vacation request</h1>
<h4 class="sub-header">HR Department</h4>
</div>
</div>
</header>
<div class="container-fluid" id="container">
<div class="row">
<div class="col-sm-2">
<img src="logo.png" class="logo" />
</div>
</div>
<div class="row">
<p class="main-paragraph">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<form>
<div class="row">
<h3>Date and availability</h3>
<div class="table-responsive">
<div class="form-group">
<table class="table">
<tr>
<th> <label for="txtTodaydate">Today's Date</label></th>
<th> <label for="txtDateavailable">Date available</label></th>
</tr>
<tr>
<td>
<input type="text" id="txtTodaydate" class="form-control" />
</td>
<td>
<input type="text" id="txtDateavailable" class="form-control" />
</td>
</tr>
</table>
</div>
<h3>For each day, list the hours you are available to work</h3>
<div class="form-group">
<table class="table">
<tr>
<td class="col-sm-4">
<label for="txtMonday" class="control-label">Monday</label>
<input type="text" id="txtMonday" class="form-control" />
</td>
<td class="col-sm-4">
<label for="txtTuesday" class="control-label">Tuesday</label>
<input type="text" id="txtTuesday" class="form-control" />
</td>
<td class="col-sm-4">
<label for="txtWednesday" class="control-label">Wednesday</label>
<input type="text" id="txtWednesday" class="form-control" />
</td>
</tr>
<tr>
<td class="col-sm-4">
<label for="txtFriday" class="control-label">Friday</label>
<input type="text" id="txtFriday" class="form-control" />
</td>
<td class="col-sm-4">
<label for="txtSaturday" class="control-label">Saturday</label>
<input type="text" id="txtSaturday" class="form-control" />
</td>
<td class="col-sm-4">
<label for="txtSunday" class="control-label">Sunday</label>
<input type="text" id="txtSunday" class="form-control" />
</td>
</tr>
<tr>
<td class="col-sm-4">
<label for="txtThursday" class="control-label">Thursday</label>
<input type="text" id="txtThursday" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<h3>Personal Information</h3>
<div class="form-group">
<label for="txtName" class="form-label">Name:</label>
<input type="text" class="form-control" id="txtName"/>
</div>
<div class="form-group">
<label for="txtAddress" class="form-label">Address:</label>
<input type="text" class="form-control" id="txtAddress"/>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="txtHomePhone" class="form-label">Home Phone:</label>
<input type="text" class="form-control" id="txtHomePhone"/>
</div>
<div class="col-sm-6">
<label for="txtPhone" class="form-label">Phone:</label>
<input type="text" class="form-control" id="txtPhone"/>
</div>
</div>
</form>
</div><!-- container-->
<footer class="container-fluid"></footer>
</body>
</html>从帖子中可以看出，我的最后 2 个字段比其他字段小，您可以从边框上注意到，我该如何解决？我在做什么错？
这是我的第一个 bootstrap 设计，因此非常感谢任何意见或建议，以提高我的技能。
最佳答案
有几件事很突出。
在您正在使用的手机字段上
col-sm-6这需要 parent<div>与行类。如果您希望表格外的所有字段都相同，您需要对布局保持某种统一性，换句话说，如果您将使用列，请在所有字段上使用它，每个字段都有行。
HTML:
<div class="formbox">
<h4>Requester Information</h4>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="control-label col-md-8" for="RName">Requester Name:</label>
<input class="form-control text-box single-line" data-val="true" data-val-length="The field Requester Name: must be a string with a minimum length of 3 and a maximum length of 50." data-val-length-max="50" data-val-length-min="3" data-val-required="Please Enter the Requesters Name!" id="RName" name="RName" style="width:400px" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="RName" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-sm-1"></div>
</div>
<div class="form-group">
<label class="control-label col-md-8" for="RAddress">Property Address:</label>
<input class="form-control text-box single-line" data-val="true" data-val-length="The field Property Address: must be a string with a minimum length of 3 and a maximum length of 50." data-val-length-max="50" data-val-length-min="3" data-val-required="Please Enter the Requesters Address!" id="RAddress" name="RAddress" style="width:85%px" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="RAddress" data-valmsg-replace="true"></span>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-8" for="RCity">City</label>
<input class="form-control text-box single-line" data-val="true" data-val-length="The field City must be a string with a minimum length of 3 and a maximum length of 50." data-val-length-max="50" data-val-length-min="3" data-val-required="Please Enter the Requesters City!" id="RCity" name="RCity" style="width:300px" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="RCity" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-8" for="RCounty">County:</label>
<input class="form-control text-box single-line" data-val="true" data-val-length="The field County: must be a string with a minimum length of 3 and a maximum length of 50." data-val-length-max="50" data-val-length-min="3" data-val-required="Please Enter the Requesters County!" id="RCounty" name="RCounty" style="width:300px" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="RCounty" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label col-md-12" for="RState">State:</label>
<select data-val="true" data-val-required="The State: field is required." htmlattributes="{ class = form-control }" id="RState" name="RState"><option selected="selected" value="0">AL</option>
<option value="1">AK</option>
<option value="2">AZ</option>
<option value="3">AR</option>
<option value="4">CA</option>
<option value="5">CO</option>
<option value="6">CT</option>
<option value="7">DE</option>
<option value="8">FL</option>
<option value="9">GA</option>
<option value="10">HI</option>
<option value="11">ID</option>
<option value="12">IL</option>
<option value="13">IN</option>
<option value="14">IA</option>
<option value="15">KS</option>
<option value="16">KY</option>
<option value="17">LA</option>
<option value="18">ME</option>
<option value="19">MD</option>
<option value="20">MA</option>
<option value="21">MI</option>
<option value="22">MN</option>
<option value="23">MS</option>
<option value="24">MO</option>
<option value="25">MT</option>
<option value="26">NE</option>
<option value="27">NV</option>
<option value="28">NH</option>
<option value="29">NJ</option>
<option value="30">NM</option>
<option value="31">NY</option>
<option value="32">NC</option>
<option value="33">ND</option>
<option value="34">OH</option>
<option value="35">OK</option>
<option value="36">OR</option>
<option value="37">PA</option>
<option value="38">RI</option>
<option value="39">SC</option>
<option value="40">SD</option>
<option value="41">TN</option>
<option value="42">TX</option>
<option value="43">UT</option>
<option value="44">VT</option>
<option value="45">VA</option>
<option value="46">WA</option>
<option value="47">WV</option>
<option value="48">WI</option>
<option value="49">WY</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="RState" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<label class="control-label col-md-8" for="RPostal">Zip:</label>
<input class="form-control text-box single-line" data-val="true" data-val-length="The field Zip: must be a string with a minimum length of 3 and a maximum length of 50." data-val-length-max="50" data-val-length-min="3" data-val-required="Please Enter the Requesters Postal code!" id="RPostal" name="RPostal" style="width:100px" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="RPostal" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-8" for="RPhone">Requester Phone Number</label>
<input class="form-control text-box single-line" data-val="true" data-val-length="The field Requester Phone Number must be a string with a maximum length of 32." data-val-length-max="32" data-val-regex="Invalid Phone Number!" data-val-regex-pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$" data-val-required="You have not entered a phone numer for the Requester, Please enter the Requesters phone number so we can get back to you!" id="RPhone" name="RPhone" style="width:400px" type="tel" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="RPhone" data-valmsg-replace="true"></span>
</div>
</div><div class="col-sm-1"></div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label col-md-8" for="RUserEmailAddress">Requester Email Address</label>
<input class="form-control text-box single-line" data-val="true" data-val-length="The field Requester Email Address must be a string with a maximum length of 128." data-val-length-max="128" data-val-regex="The Requester Email field is not valid, Please enter a valid email address!" data-val-regex-pattern="^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$" data-val-required="You have not entered an Email address, Please enter the Requesters email address!" id="RUserEmailAddress" name="RUserEmailAddress" style="width:400px" type="email" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="RUserEmailAddress" data-valmsg-replace="true"></span>
</div>
</div>
</div>
关于html - Bootstrap 对齐问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32416788/