html - 在复选框上方移动复选框标签

Question

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

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

<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”或 break 标签，您告诉复选框“分解”到可用的下一行。

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

HTML

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

希望对您有所帮助!