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

【问题标题】：Moving checkbox label above checkbox将复选框标签移动到复选框上方
【发布时间】：2017-06-03 15:49:33
【问题描述】：

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

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

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

【问题讨论】：

在<input type="checkbox" value="">之前使用<br>
或将您的复选框包裹在div中。

标签： html twitter-bootstrap

【解决方案1】：

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

您的代码将如下所示...

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>

希望有帮助！

【讨论】：

【解决方案2】：

您可以更改为如下结构，因为......

它可以根据您的需要灵活地放置标签和 复选框。
不仅如此，还有一个重要原因，为什么您应该将<input> 包装在<label> 标签内，即使您单击标签本身，复选框也会起作用，而不仅仅是复选框那是早些时候。

在此示例中，使用您的结构，因此当您单击“查看统计信息”时，不会选中/取消选中复选框。但是，如果您将<input> 包裹在<label> 中，那么即使您单击标签本身，也可以实现复选框功能。

需要的也可以参考JSfiddlehttps://jsfiddle.net/Dhruvil21_04/2m3asp3k/

<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<br>
           <input id="viewstats" type="checkbox" value="">
         </label>
         
      </div>
   </div>
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewgraphs">
           View Graphs<br>
           <input id="viewgraphs" type="checkbox" value="">
         </label>
      </div>
   </div>
   <div class="col-md-2">
      <div class="form-group">
         <label for="viewnotifications">
            View Notifcations<br>
           <input id="viewnotifications" type="checkbox" value="">
         </label>         
      </div>
   </div>
</div>

【讨论】：

也可以在输入栏添加属性display: block;