form-horizontal+form-group 实现表单横排显示(Bootstrap)

 利用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>

运行效果图如下:

提示:必须按照bootstrap的div中类的包含关系的固定模式来实现,否则无法达到横排效果。

猜你喜欢

转载自blog.csdn.net/qq_39198486/article/details/82622853
今日推荐