將一行中的字體超棒圖標與標籤對齊

Question

如何使一行中的字體超棒圖標與複選框和標籤對齊？

現在我有這個

而且我希望有[]state?

<div class="row"> 
 
    <div class="col-12"> 
 
    <div class="well"> 
 
     <div class="form-group"> 
 
     <div class="col-md-4"> 
 
      <label class="checkbox"> 
 
      <input type="checkbox"> state 
 
      </label> 
 
      <i class="fa fa-question-circle" 
 
      aria-hidden="true" 
 
      uib-popover="it is state" 
 
      popover-trigger="'mouseenter'"></i> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

將i標籤在標籤內。

<div class="row"> 
     <div class="col-12"> 
     <div class="well"> 
      <div class="form-group"> 
      <div class="col-md-4"> 
       <label class="checkbox"> 
       <input type="checkbox"> state 
       <i class="fa fa-question-circle" 
       aria-hidden="true" 
       uib-popover="it is state" 
       popover-trigger="'mouseenter'">a</i> 
       </label> 

      </div> 
      </div> 
     </div> 
     </div> 
    </div> 

或添加class='text-nowrap'

<div class="row"> 
    <div class="col-12"> 
    <div class="well"> 
     <div class="form-group"> 
     <div class="col-md-4 text-nowrap"> 
      <label class="checkbox"> 
      <input type="checkbox"> state 
      </label> 
      <i class="fa fa-question-circle" 
      aria-hidden="true" 
      uib-popover="it is state" 
      popover-trigger="'mouseenter'"></i> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>