Twitter Bootstrap 3 - glyphicons de réaction sont décalés

Quand je mets 2 champs dans une rangée, leurs glyphicons sont présentés with a nasty offset:Twitter Bootstrap 3 - glyphicons de réaction sont décalés

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

La pleine jsFiddle est ici: https://jsfiddle.net/v_melnik/f8u9hvLa/6/

est-il un moyen de les faire montrer correctement?

Un grand merci à tout le monde!

MISE À JOUR: Quelqu'un a marqué cette question en tant que doublon de this one. Mais cette question ne concerne pas l'ajout d'un glyhicon, il s'agit plutôt d'utiliser des glyphons avec une boîte d'entrée "rétrécie".

Source

2017-03-16 Vladimir Melnik

double possible de [Ajouter Bootstrap Glyphicon à la case d'entrée] (http://stackoverflow.com/questions/18838964/add-bootstrap -glyphicon-to-input-box) – mayersdesign

Par ailleurs, les champs sont alignés un peu mieux quand j'utilise la classe 'row' pour le' div' externe, mais les glyphicons sont stil J'ai décalé: https://jsfiddle.net/v_melnik/t3bdhzbk/1/ –

@mayersdesign, je ne suis pas d'accord: ma question ne concerne pas l'ajout d'un glyphicon à la boîte d'entrée, il s'agit de son alignement qui fonctionne bien lorsque la boîte a la largeur totale et être cassé lorsque la boîte a la classe 'col - * - *'. –

changer votre code 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

Source

2017-03-16 11:47:30

pouvez-vous donner un exemple? – bhansa

jeter un oeil https://jsfiddle.net/f8u9hvLa/7/ –

Merci, il semble que ce soit la solution la plus adaptée (comme à mon goût). –

Utilisez position:absolute pour glyphicon.

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

DEMO

Source

2017-03-16 11:49:51 bhansa

uniquement pour Mobile Device Parce que vous pouvez utiliser xs classe. Ajouter un style.

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

Source

2017-03-16 11:57:16

Twitter Bootstrap 3 - glyphicons de réaction sont décalés

Répondre

Questions connexes