需要Twitter bootstrap最佳实践建议
需要Twitter bootstrap最佳实践建议
提问于 2015-02-27 13:54:30
我有以下场景
我有一个如下所示的经典表单布局，其中包含两行的标签和文本框。因此需要将页面转换为使用新的Bootstrap布局。
方法1 :- 1行，有2个"col-md-12“网格。
方法2 :- 2行，每行一个"col-md-12“。
哪一项是未来扩展的最佳实践？我认为第一种方法是正确的。因为如果他需要将输入框放在标签旁边，他可以简单地调整网格大小以适合一行。例如：-col md-4和col md-8
回答 1
Stack Overflow用户
发布于 2015-02-27 14:58:13
方法1是最佳实践。
如果您使用的是水平表单，那么bootstrap已经提供了自己的类.form-horizontal，请参阅下面的代码片段：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>My Form</h2>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28758457
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号