将一行中的字体 - 真棒图标与标签对齐

时间:2017-10-12 10:24:45

标签: twitter-bootstrap font-awesome

如何将一行中的字体真棒图标与复选框和标签对齐?

现在我有了这个 enter image description here

我希望[] 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>

1 个答案:

答案 0 :(得分: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>