【发布时间】：2015-12-01 17:13:47
【问题描述】：
我有一个页面，我使用引导程序创建了它的设计，我有一个问题和一些问题要问，首先，我们可以在具有行类的 div 中使用 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>从帖子中可以看出，我的最后两个字段比其他字段小，您可以从边框注意到，我该如何解决？这是怎么回事？
这是我的第一个引导程序设计，因此非常感谢任何 cmets 或建议，以提高我的技能。
【问题讨论】：
标签： html css twitter-bootstrap