Question

我有以下情况

我有一个经典的表单布局，如下所示，标签和文本框分为2行。因此需要将页面转换为使用新的Bootstrap布局。

enter image description here

方法1： - 1行，带2个“col-md-12”网格。

方法2： - 每行有一行“col-md-12”的2行。

未来扩展的最佳做法是什么？我认为第一种方法是正确的。因为如果他需要在标签旁边放置输入框，他可以简单地调整网格大小以适合一行。例如： - col-md-4和col-md-8

Answer 1

方法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>

需要Twitter bootstrap最佳实践建议

1 个答案: