Twitter Bootstrap 3 - 反馈字形被转移答案

【问题标题】：Twitter Bootstrap 3 - feedback glyphicons are shiftedTwitter Bootstrap 3 - 反馈字形被转移
【发布时间】：2023-03-14 14:56:01
【问题描述】：

当我将 2 个字段连续放置时，它们的字形将显示为with a nasty offset：

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

有没有办法让它们正确显示？

非常感谢大家！

更新：有人将此问题标记为与this one 重复。但是这个问题不是关于添加一个 glyhicon，而是关于使用带有“狭窄”输入框的 glyphicon。

【问题讨论】：

Add Bootstrap Glyphicon to Input Box的可能重复
顺便说一下，当我使用row 类作为外部div 时，这些字段的对齐方式会更好一些，但字形图标仍然会移位：jsfiddle.net/v_melnik/t3bdhzbk/1
@mayersdesign，我不得不不同意：我的问题不是要在输入框中添加一个字形图标，而是它的对齐方式，当盒子有全宽时它可以正常工作，而当盒子有col-*-* 类。

标签： css forms twitter-bootstrap glyphicons

【解决方案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

【讨论】：

你能举个例子吗？
谢谢，这似乎是最合适的（按我的口味）解决方案。

【解决方案2】：

使用position:absolute 作为字形图标。

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

DEMO

【讨论】：

【解决方案3】：

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

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

Fiddle Demo

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

【讨论】：