Actualmente estoy struggeling de decisiones a partir de los elementos si twitter bootsrap 3.0 pantalla en uno sin interrupciones en ella. ¿Qué sucede cuando hago un contenedor flotante es que los elementos de entrada se cortan.

Mira este jsfiddle por favor

    <form id="commentform" method="post" action="http://devsite.localhost/wp-comments-post.php" name="commentform">
<span class="comment-form-author"><label class="obscure" for="author">Name</label><span class="input-group span2"><input type="text" placeholder="Name *" aria-required="true" tabindex="1" size="30" value="" name="author" id="author" /></span></span> <span class="comment-form-email"><label class="obscure" for="author">Email</label><span class="input-group span3"><input type="text" placeholder="Email *" aria-required="true" tabindex="2" size="30" value="" name="email" id="email" /></span></span> <span class="comment-form-url"><label class="obscure" for="url">Website</label><span class="input-group span3"><input type="text" placeholder="Website" tabindex="3" size="30" value="" name="url" class="input-medium" id="url" /></span></span>
<div class="comment-form-comment">
<textarea placeholder="Comment" aria-required="true" tabindex="4" rows="8" cols="45" name="comment" id="comment">
</textarea>
</div>
<!-- #form-section-comment .form-section -->
<p class="form-submit"><input type="submit" value="Post Comment" id="submit" name="submit" /> <input type="hidden" id="comment_post_ID" value="14" name="comment_post_ID" /> <input type="hidden" value="0" id="comment_parent" name="comment_parent" /></p>
</form>

css

@import url('http://my-hardware.net/bs/bootstrap.css');
/* hiding content but not from screen readers, used in comments form */
.obscure {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.comment-form-email{
display: block;
float: left;
}

Para mostrar los efectos acabo de añadir mi intento de uno de los 3 imputs quiero a la línea.

¿Alguien tiene una idea de cómo hacer este trabajo?

  • Creo que tal vez es un problema con el bootstrap 3.0 (el glyphicons son desiguales), en la sitio oficial es todavía la versión 2.2.2 y uso funciona muy bien, como este ejemplo
  • Lázaro no lo consiguió del todo! Quiero que los campos de entrada al lado de en la misma línea. Las cosas han cambiado en 3.0 sí, pero no hay ningún problema en todo lo que no desea volver a crear el ejemplo de hombre! Quiero mostrarlas después de cada uno de los otros! Yo git esto con la 2.2.2 y no en el ejemplo. Leer y buscar en el css la próxima vez! Y el glifo-los iconos no se muestra bc ellos simplemente no están allí (en ruta)
  • El uso de JSFiddle tidy parece revelar algunos problemas HTML. Me gustaría empezar por la validación de su código.
InformationsquelleAutor James Mitch | 2013-01-15

1 Comentario

  1. 6

    Creo que esto debería funcionar…

    <div class="controls-row">
    <div class="control-group col col-lg-2">
    <div class="input-group">
    <span class="input-group-addon">X</span>
    <input type="text">
    </div>
    </div>
    <div class="control-group col col-lg-2">
    <div class="input-group">
    <span class="input-group-addon">Y</span>
    <input type="text">
    </div>
    </div>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here