form-horizontal+form-group 实现表单横排显示（Bootstrap）

最新推荐文章于 2024-08-08 18:58:30 发布

aspiring123

最新推荐文章于 2024-08-08 18:58:30 发布

阅读量1.5w

点赞数 2

分类专栏：前端文章标签： bootstrap 表单横排显示 horizontal

本文链接：https://blog.csdn.net/qq_39198486/article/details/82622853

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用bootstrap中的表单form中的form-horizontal类来实现表单横排显示，

见下例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>按钮</title>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	</head>
	<body>
		<div class="container">
			<h1>表单</h1>
			<div class="form-horizontal">
				<div class="form-group">
				    <label for="exampleInputEmail1" class="col-lg-2">Email address</label>
				    <div class="col-lg-10">
				    	<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
				    </div>
				</div>
				<div class="form-group">
				    <label for="exampleInputPassword1" class="col-lg-2">Password</label>
				    <div class="col-lg-10">
				    	<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
				    </div>
				</div>
			</div>
		</div>
	</body>
</html>

运行效果图如下：