De abajo es mi html (en Jade) de glyphicons en complementos.

.input-group
    input.form-control(type='text')
    span.input-group-addon.glyphicon.glyphicon-calendar

Sin embargo en el complemento no está alineado con el campo de entrada. Screeshot:

Bootstrap 3 glyphicons en complementos

Es normal o un error en bootstrap 3?

Actualización

Tengo:
en bootstrap.css:2171 (compilado con menos)

.glyphicon{ ...; top: 1px; ...}

Error?

  • Has probado a restablecer el nivel de zoom de tu navegador (ctrl+0 en Firefox)?
  • hmm no está en default. En todos los niveles aparecen como eso. Por cierto, este es el sistema operativo Chrome OS X, pero también se replica en safari.
  • Sería de gran ayuda si quieres mostrar el código HTML. Tal vez hay algo que pasa fuera de los elementos. Mostrar todo el formulario.
InformationsquelleAutor Diolor | 2013-10-03

9 Comentarios

  1. 29

    Sí, parece que es un error para mi: Es un bug: https://github.com/twbs/bootstrap/issues/10936

    He leído este https://github.com/twbs/bootstrap/issues/9850 primera.

    Puedo usar este código para esto:

    <div class="container"> 
    <br>
    <div class="input-group">
      <span class="input-group-addon glyphicon glyphicon-star"></span>    
      <input type="text" class="form-control" placeholder="Username">
    </div>
    <br>
    <div class="input-group input-group-sm">
      <span class="input-group-addon glyphicon glyphicon-star"></span>    
      <input type="text" class="form-control" placeholder="Username">
    </div>
    <br>
    <div class="input-group input-group-lg">
      <input type="text" class="form-control" placeholder="Username">
      <span class="input-group-addon glyphicon glyphicon-star"></span>    
    </div>
    <br>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Username">   
      <span class="input-group-addon glyphicon glyphicon-star"></span>    
    </div>
    <br>
    <div class="input-group input-group-sm">
      <input type="text" class="form-control" placeholder="Username">
      <span class="input-group-addon glyphicon glyphicon-star"></span>    
    </div>
    <br>
    <div class="input-group input-group-lg">
      <input type="text" class="form-control" placeholder="Username">
      <span class="input-group-addon glyphicon glyphicon-star"></span>    
    </div>
    <br>
    <div class="input-group input-group-lg">
      <input type="text" class="form-control" placeholder="Username">
      <span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>    
    </div>
    <br>
    </div>

    Resultados para Firefox:

    Bootstrap 3 glyphicons en complementos:

    No será un problema para input-group-lg el doble span hace la entrada más (debido a la .glyphicon:vacío), pero no soluciona el problema.
    Yo también no se encontró .glyphicon{ ...; top: 1px; ...} causa de este problema.

    Para firefox encontré esta solución:

    de bootstrap.css:

    .input-group-lg > .form-control,
    .input-group-lg > .input-group-addon,
    .input-group-lg > .input-group-btn > .btn {
      height: 45px;
      padding: 10px 16px;
      font-size: 18px;
      line-height: 1.33;
      border-radius: 6px;
    }

    Cambiar el relleno vertical de 10px a 9px resuelto el problema.

    Esta reglas css que viene de las formas.menos (.la entrada lg() llamada de inputgroups.menos)
    el uso de @padding-gran-vertical: 10px; (de las variables.menos)

    En google chrome me encontré con un mismo tipo de problema, para todos los tamaños de ver:

    Bootstrap 3 glyphicons en complementos

    En este caso ayuda a utilizar el doble de luz:

    `<span class="input-group-addon"><span class="glyphicon glyphicon-star"></span></span>` 
    • Hola Bass, gracias. Lo resuelto por la desactivación de la línea 23 aquí. No sé por qué existe pero es la única cosa que se parece a crear el problema.
  2. 42

    Para aclarar Bass’ de respuesta, con la actual versión de Bootstrap 3, todo lo que necesitas hacer es:

    <div class="input-group input-group-lg">
      <input type="text" class="form-control">
      <span class="input-group-addon"><span class=" glyphicon glyphicon-star"></span></span>
    </div>

    En otras palabras, sólo el fondo de Bootstrap marcado como se describe en la documentación.

    • La clave es nido <span> con .glyphicon dentro de <span> con .entrada-grupo-addon. El uso de una sola <span> con ambos .glyphicon y .entrada-grupo-addon como en OP ejemplo, puede causar problemas.
  3. 1
    <div class="input-prepend input-append">
        <span class="add-on"> <i class="icon-user"></i></span>
        <input class="span2" id="appendedPrependedInput" type="text">
        <span class="add-on"> <i class="icon-envelope"></i></span>
    </div>
  4. 0
    <span class="input-group-addon"><i class="glyphicon glyphicon-user glyphicon-color"></i></span>
    • Por favor editar con más información. Del código y la «prueba esto» respuestas se desanime, porque no contienen contenido que se puede buscar, y no explican por qué alguien debería «prueba esto». Hacemos un esfuerzo aquí para ser un recurso para el conocimiento.
  5. 0

    Me fijo por la adición de esta «posición inicial» para el span style que la glyphicon vive en. O usted podría utilizar css como este.

    .glyphicon {
      position: initial;
    }

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-addon glyphicon glyphicon-tags" style="position:initial"></span>
        <input type="text" class="form-control" placeholder="Tags" />
      </div>
    </div>

  6. 0

    Viejo post, pero es posible ayudar a alguien: yo uso un botón y funciona perfectamente!

        <div class="input-group">
            <input type="text" class="form-control" placeholder="Filter"/>
            <span class="input-group-btn">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-filter"></span></button>
            </span>                        
        </div>

Dejar respuesta

Please enter your comment!
Please enter your name here