将复选框标签移动到复选框上方

Question

如何将复选框标签移动到复选框上方？

目前标签出现在复选框的左侧，我希望它们位于复选框上方。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewstats">
         View Statistics
         </label>
         <input type="checkbox" value="">
      </div>
   </div>
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewgraphs">
         View Graphs
         </label>
         <input type="checkbox" value="">
      </div>
   </div>
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewnotifications">
         View Notifcations
         </label>
         <input type="checkbox" value="">
      </div>
   </div>
</div>

Answer 1

你的问题的答案很简单。您所要做的就是在每个结束“label”标签后使用“br”标签。换句话说，通过使用“br”或中断标记，您可以告诉复选框“中断”到可用的下一行。

你的代码看起来像这样......

超文本标记语言

<div class="row">
    <div class="col-md-2">
        <div class="form-group">
            <label for="viewstats">
                View Statistics
            </label>
            <br>
            <input type="checkbox" value="">
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label for="viewgraphs">
                View Graphs
            </label>
            <br>
            <input type="checkbox" value="">
        </div>
    </div>
    <div class="col-md-2">
        <div class="form-group">
            <label for="viewnotifications">
                View Notifcations
            </label>
            <br>
            <input type="checkbox" value="">
        </div>
    </div>
</div> 

希望有帮助！