Twitter Bootstrap 3 - 反馈图标偏移了

Question

当我把两个字段放在一行时，它们的图标显示出不好看的偏移：

<div class="form-inline">
  <div class="form-group col-xs-6 has-feedback has-error">
    <input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
  <div class="form-group col-xs-6 has-feedback has-error">
    <input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  </div>
</div>

完整的 JSFiddle 在此处: https://jsfiddle.net/v_melnik/f8u9hvLa/6/ 有没有办法使它们正确显示？

非常感谢大家！

更新：有人将此问题标记为这个问题的重复。但是，这个问题不是关于添加 glyhicon，而是关于在“缩小”的输入框中使用 glyphicons。

- Volodymyr Melnyk

---

可能是[在输入框中添加Bootstrap图标]的重复问题（https://dev59.com/a2Mk5IYBdhLWcg3w7COX） - mayersdesign

顺便说一下，当我在外部的div中使用row类时，字段对齐得更好了，但是glyphicons仍然偏移：https://jsfiddle.net/v_melnik/t3bdhzbk/1/ - Volodymyr Melnyk

@mayersdesign，我不得不反对：我的问题不是关于在输入框中添加glyphicons，而是关于其对齐方式。当该框具有完整宽度时，一切正常，但当该框具有“col-*-*”类时，则会出现问题。 - Volodymyr Melnyk

Answer 1

改变你的HTML。

    <div class="form-inline">
      <div class="col-xs-6">     
      <div class="form-group has-feedback has-error">
        <input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
      </div>
      <div class="col-xs-6">
      <div class="form-group has-feedback has-error">
        <input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
      </div>
      </div>
    </div>

jsfiddle

的英译中，保留了HTML，不做解释。

- Ankit Singh

---

你能举个例子吗？ - bhansa

谢谢，这似乎是最适合我的解决方案（符合我的口味）。 - Volodymyr Melnyk

Answer 2

使用 position:absolute 来定位 glyphicon。

.glyphicon-remove::before {
    left: 0;
    position: absolute;
}

演示

- bhansa

Answer 3

仅适用于移动设备 因为你可以使用xs类。 添加样式。

.form-control-feedback
{
  right: 7px;
}

小提琴演示

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.form-control-feedback
{
  right: 7px;
}
.

<!-- We'll use col-xs-* here, as JSFiddle's result window is really narrow -->
<div class="ibox col-xs-12">
  <div class="ibox-content">
    <form action="#">
      <div>
        <label>Location</label>
        <div class="form-inline">
          <div class="form-group col-xs-6 has-feedback has-error">
            <input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
          </div>
          <div class="form-group col-xs-6 has-feedback has-error">
            <input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

- Sumit patel