Question

使用has-feedback类在表单字段上添加图标并使用引导工具提示时，图标会向上移动。我使用chrome，firefox和ie获得了相同的行为。

<div class="row">
  <div class="col-md-5 col-md-offset-1">
    <div class="form-group form-group-lg has-feedback">
      <input class="form-control" name="foo" placeholder="foo" data-toggle="tooltip" title="Hooray!" type="text">
      <span class="glyphicon glyphicon-euro form-control-feedback"></span>
    </div>
  </div>
</div>

JS档案

$('[data-toggle="tooltip"]').tooltip();

这里的例子 Bootply

有谁知道如何解决这个问题？谢谢

Answer 1

失败的原因是这个Bootstrap选择器：

.form-group-lg .form-control+.form-control-feedback {...}

当您悬停字段时，工具提示<div>会在输入后立即插入，从而打破+条件，因为图标不再紧跟在输入之后。解决方案是在父元素上移动工具提示，这样它就不会干扰儿童样式：

<div class="row">
  <div class="col-md-5 col-md-offset-1">
    <div class="form-group form-group-lg has-feedback" data-toggle="tooltip" title="Hooray!">
      <input class="form-control" name="foo" placeholder="foo" type="text">
      <span class="glyphicon glyphicon-euro form-control-feedback"></span>
    </div>
  </div>
</div>

演示：http://www.bootply.com/tohoEsh0cX

Bootstrap工具提示向上移动has-feedback图标

1 个答案: