Question

当我连续放置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，而是将glyphicons用于＆＃34;缩小＆＃34;输入框。

Answer 1

更改你的HTML

readonly

jsfiddle

Answer 2

将position:absolute用于glyphicon。

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

DEMO

Answer 3

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

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

<强> Fiddle Demo

＆＃13;

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

＆＃13;

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

＆＃13;

Twitter Bootstrap 3 - 反馈字形移位

3 个答案: