Bootstrap水平表单标签与静音说明

Question

在下面的Bootstrap水平表单中，如果我想要在Order标签下方添加一个标题，如<small class="text-muted">必须至少为200</small>，我该把它放在哪里？ 注意：问题涉及如何将静音字幕放置在小静音字体的Bootstrap水平表单标签正下方。我知道占位符属性的作用，但在实际应用程序中，我确实需要在表单标签下方放置这样的标题。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Horizontal form</h2>
  <form class="form-horizontal" action="/action_page.php">
    <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" name="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" name="pwd">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
      </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>

- nam

Answer 1

您可以将<label>标签嵌套在一个新的div中，将col-sm-2类移动到该

中，并在其中添加元素：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Horizontal form</h2>
  <form class="form-horizontal" action="/action_page.php">
    <div class="form-group">
      <div class="col-sm-2">
        <label class="control-label" for="email">Email:</label><br />
        <small class="text-muted">Must be at least 200</small>
      </div>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-2">
        <label class="control-label" for="pwd">Password:</label><br />
        <small class="text-muted">Must be at least 200</small>
      </div>
      <div class="col-sm-10">          
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
      </div>
    </div>
    <div class="form-group">        
      <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
          <label><input type="checkbox" name="remember"> Remember me</label>
        </div>
      </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>

请打开全屏以查看实际结果

- Dekel

---

看起来你走在正确的轨道上。我确实需要水平表单，就像我快照中显示的那样。你的是内联表单。 - nam

你在全屏模式下打开了吗？一旦你运行这段代码片段，会有一个名为“全屏”的链接。点击它 :) - Dekel

太好了。感谢你的帮助。 - nam