Richard_Li
2017-12-22 21:40
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>水平表单</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<div>
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div>
<input type="email" id="inputEmail3" placeholder="请输入您的邮箱地址">
</div>
</div>
<div>
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div>
<input type="password" id="inputPassword3" placeholder="请输入您的邮箱密码">
</div>
</div>
<div>
<div class="col-sm-offset-2 col-sm-10">
<div>
<label>
<input type="checkbox"> 记住密码
</label>
</div>
</div>
</div>
<div>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">进入邮箱</button>
</div>
</div>
</form>
</body>
</html>
还要把Bootstrap4换成Bootstrap3
Bootstrap 提供了下列类型的表单布局:
垂直表单(默认) 内联表单 水平表单
要记得分组例如
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
详细的可以参考
http://www.runoob.com/bootstrap/bootstrap-forms.html
玩转Bootstrap(基础)
314544 学习 · 2275 问题
相似问题