一行内联表单，标签位于输入字段上方
Inline form in one row with labels above input fields
我正在使用 angularjs 和 bootstrap 3 作为 css 构建一个网络应用程序（我对 css 的了解非常有限）。我想创建一个内联表单，其中包含 5 个输入字段和位于它们之上的标签。第一个字段需要比其他字段占用更多 space。
我在这里尝试了一个 plnkr：http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview
这是我尝试过的标记：
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">
<div class="form-group col-md-4">
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
<input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
</div>
<div class="form-group col-md-4">
<label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
<input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
</div>
<div class="form-group col-md-3">
<label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
<select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
<div class="form-group col-md-4">
<label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
<input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
/>
</div>
<div class="form-group col-md-3">
<label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
<select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
<div class="row align-center">
<input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
</div>
</form>
这是当前 plnkr 呈现标记的方式：
你想要这样的东西吗：
http://plnkr.co/edit/jWZMxIZEoBGuzjHgIiFq?p=preview
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<style>
body {
padding-top: 60px;
}
@media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
.form-group {
float:left;
margin: 1.2em;
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<form name="form" novalidate="" ng-submit="processForm()"
class="form-inline">
<div class="form-group col-md-4">
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
<br/><input class="form-control" id="location" name="location" type="text" ng-model="location"
ng-required="true"
ng-autocomplete details="details" options="options" placeholder="Location"/>
</div>
<div class="form-group col-md-4">
<label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
<br/><input class="form-control" id="startDate" name="startDate" type="text"
datepicker-popup="{{format}}"
ng-model="startDate"
is-open="openedStart" datepicker-options="dateOptions"
ng-required="true" close-text="Close" ng-click="openStart($event)"/>
</div>
<div class="form-group col-md-3">
<label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
<br/><select class="form-control" id="startTime" ng-model="selectedStartTime"
ng-options="time.label for time in times"
ng-required="true">
</select>
</div>
<div class="form-group col-md-4">
<label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
<br/><input class="form-control" id="endDate" name="endDate" type="text"
datepicker-popup="{{format}}"
ng-model="endDate"
is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions"
ng-required="true" close-text="Close" ng-click="openEnd($event)"/>
</div>
<div class="form-group col-md-3">
<label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
<br/><select class="form-control" id="endTime" ng-model="selectedEndTime"
ng-options="time.label for time in times"
ng-required="true">
</select>
</div>
<!--</div>-->
<div class="row align-center">
<input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled"/>
</div>
</form>
</div>
<!-- /container -->
</body>
</html>
您可以尝试将您的标签和输入包装在 div 中并尝试。喜欢：
<div class="form-group col-md-4">
<div>
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
</div>
<div>
<input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
</div>
</div>
添加我的评论作为答案，我猜这可能是解决方案。
您正在使用 4+4+3+4+3=18 列。将这些限制在总共最多 12 个。决定你可以缩小哪些。
您只需按预期使用网格，始终牢记列的总和必须为 12。因此，在您的示例中，您可以使用类似这样的内容。请注意我还如何通过偏移列对表单的相似区域进行分组：
<div class="container">
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">
<div class="row">
<div class="col-md-6">
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
<input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
</div>
<div class="col-md-3">
<label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
<input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
</div>
<div class="col-md-3">
<label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
<select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-6"><label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
<input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
/></div>
<div class="col-md-3"> <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
<select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
</select></div>
</div>
<div class="row align-center">
<input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
</div>
</form>
</div>
现在一些最小的 CSS 间距并确保所有元素的行为相同：
label{display:block}
.control-label{padding-top:20px}
.align-center{text-align:center; padding:20px}
#location.form-control{width:100%}
当然你可以随意设计它。你可以看到 result here
我正在使用 angularjs 和 bootstrap 3 作为 css 构建一个网络应用程序（我对 css 的了解非常有限）。我想创建一个内联表单，其中包含 5 个输入字段和位于它们之上的标签。第一个字段需要比其他字段占用更多 space。
我在这里尝试了一个 plnkr：http://plnkr.co/edit/a2p7RNy2SueH82WoSg5e?p=preview
这是我尝试过的标记：
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">
<div class="form-group col-md-4">
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
<input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
</div>
<div class="form-group col-md-4">
<label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
<input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
</div>
<div class="form-group col-md-3">
<label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
<select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
<div class="form-group col-md-4">
<label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
<input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
/>
</div>
<div class="form-group col-md-3">
<label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
<select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
<div class="row align-center">
<input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
</div>
</form>
这是当前 plnkr 呈现标记的方式：
你想要这样的东西吗：
http://plnkr.co/edit/jWZMxIZEoBGuzjHgIiFq?p=preview
这是代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<style>
body {
padding-top: 60px;
}
@media (max-width: 979px) {
/* Remove any padding from the body */
body {
padding-top: 0;
}
}
.form-group {
float:left;
margin: 1.2em;
}
</style>
<link href="style.css" rel="stylesheet" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png" />
<!-- Le javascript
================================================== -->
<script data-require="jquery" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="container">
<form name="form" novalidate="" ng-submit="processForm()"
class="form-inline">
<div class="form-group col-md-4">
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
<br/><input class="form-control" id="location" name="location" type="text" ng-model="location"
ng-required="true"
ng-autocomplete details="details" options="options" placeholder="Location"/>
</div>
<div class="form-group col-md-4">
<label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
<br/><input class="form-control" id="startDate" name="startDate" type="text"
datepicker-popup="{{format}}"
ng-model="startDate"
is-open="openedStart" datepicker-options="dateOptions"
ng-required="true" close-text="Close" ng-click="openStart($event)"/>
</div>
<div class="form-group col-md-3">
<label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
<br/><select class="form-control" id="startTime" ng-model="selectedStartTime"
ng-options="time.label for time in times"
ng-required="true">
</select>
</div>
<div class="form-group col-md-4">
<label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
<br/><input class="form-control" id="endDate" name="endDate" type="text"
datepicker-popup="{{format}}"
ng-model="endDate"
is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions"
ng-required="true" close-text="Close" ng-click="openEnd($event)"/>
</div>
<div class="form-group col-md-3">
<label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
<br/><select class="form-control" id="endTime" ng-model="selectedEndTime"
ng-options="time.label for time in times"
ng-required="true">
</select>
</div>
<!--</div>-->
<div class="row align-center">
<input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled"/>
</div>
</form>
</div>
<!-- /container -->
</body>
</html>
您可以尝试将您的标签和输入包装在 div 中并尝试。喜欢：
<div class="form-group col-md-4">
<div>
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
</div>
<div>
<input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
</div>
</div>
添加我的评论作为答案，我猜这可能是解决方案。
您正在使用 4+4+3+4+3=18 列。将这些限制在总共最多 12 个。决定你可以缩小哪些。
您只需按预期使用网格，始终牢记列的总和必须为 12。因此，在您的示例中，您可以使用类似这样的内容。请注意我还如何通过偏移列对表单的相似区域进行分组：
<div class="container">
<form name="form" novalidate="" ng-submit="processForm()" class="form-inline">
<div class="row">
<div class="col-md-6">
<label class="control-label" for="location"><i class="glyphicon glyphicon-map-marker"></i> Location</label>
<input class="form-control" id="location" name="location" type="text" ng-model="location" ng-required="true" ng-autocomplete details="details" options="options" placeholder="Location" />
</div>
<div class="col-md-3">
<label class="control-label" for="startDate"><i class="glyphicon glyphicon-calendar"></i> Pickup date</label>
<input class="form-control" id="startDate" name="startDate" type="text" datepicker-popup="{{format}}" ng-model="startDate" is-open="openedStart" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openStart($event)" />
</div>
<div class="col-md-3">
<label class="control-label" for="startTime"><i class="glyphicon glyphicon-time"></i> Pickup</label>
<select class="form-control" id="startTime" ng-model="selectedStartTime" ng-options="time.label for time in times" ng-required="true">
</select>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-6"><label class="control-label" for="endDate"><i class="glyphicon glyphicon-calendar"></i> Dropoff date</label>
<input class="form-control" id="endDate" name="endDate" type="text" datepicker-popup="{{format}}" ng-model="endDate" is-open="openedEnd" min-date="startDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-click="openEnd($event)"
/></div>
<div class="col-md-3"> <label class="control-label" for="endTime"><i class="glyphicon glyphicon-time"></i> Dropoff</label>
<select class="form-control" id="endTime" ng-model="selectedEndTime" ng-options="time.label for time in times" ng-required="true">
</select></div>
</div>
<div class="row align-center">
<input type="submit" value="Search" ng-disabled="form.$invalid" class="btn btn-primary" disabled="disabled" />
</div>
</form>
</div>
现在一些最小的 CSS 间距并确保所有元素的行为相同：
label{display:block}
.control-label{padding-top:20px}
.align-center{text-align:center; padding:20px}
#location.form-control{width:100%}
当然你可以随意设计它。你可以看到 result here