2017-03-16 83 views
2

當我把連續2場,他們glyphicons正在顯示with a nasty offsetTwitter的引導3 - 反饋glyphicons移位

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

有沒有一種辦法讓他們正確顯示?

非常感謝大家!

UPDATE:有人將此問題標記爲this one的副本。但這個問題不是關於添加一個glyhicon,而是關於使用帶有「縮小」輸入框的glyphicons。

+0

的可能的複製[添加引導Glyphicon到輸入框(http://stackoverflow.com/questions/18838964/add-bootstrap -glyphicon-to-input-box) – mayersdesign

+0

順便說一下,當我使用外層'div'的'row'類時,字段的對齊情況會好一些,但glyphicons是stil我轉移:https://jsfiddle.net/v_melnik/t3bdhzbk/1/ –

+0

@mayersdesign,我不同意:我的問題不是關於添加一個圖形到輸入框,它是關於它的對齊工作正常,當盒子有全寬並在盒子有'col - * - *'類時被破壞。 –

回答

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

+0

你能舉個例子嗎? – bhansa

+0

看一看 https://jsfiddle.net/f8u9hvLa/7/ –

+0

謝謝,它似乎是最合適的(就我的口味)解決方案。 –

1

使用position:absolute爲glyphicon。

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

DEMO

1

只爲移動設備由於可以使用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>