Question

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

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

＆＃13;

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

＆＃13;

Answer 1

您的问题的答案很简单。你所要做的就是使用＆＃34; br＆＃34;每个结尾后标记＆＃34;标签＆＃34;标签。换句话说，通过使用＆＃34; br＆＃34;或者打破标签，你告诉复选框＆＃34;打破＆＃34;到下一行可用。

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

<强> HTML

＆＃13;

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

＆＃13;

希望有所帮助！

Answer 2

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

可根据需要灵活地放置标签和复选框。
不仅如此，还有重要原因，为什么你应该在<input>标签内包裹<label>，即使你点击标签，该复选框也会起作用本身而不仅仅是复选框，就像它之前一样。

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

如果您需要https://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>

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

2 个答案: