Bootstrap水平表單標籤以及一個靜音標題

Question

如果我想在標籤下面添加一個標題作爲<small class="text-muted">Must be at least 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>

Answer 1

你可以把包裹<label>用新div，移動col-sm-2到該div並添加里面的small元素：

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

公開賽在整頁看到實際的結果