Estoy teniendo problemas tratando de resolver este problema. Los médicos dicen que yo debería establecer la duración igual a la de los padres lapso, sin embargo, se extiende a la derecha fuera del contenedor bien cuando lo hago. Se ve bien, cuando se ve en el móvil (que se extiende la cantidad apropiada a la derecha, rellenando el bien), sin embargo, no juega bien en el escritorio (quiero los campos que se extienden al interior del pozo).

<div class="container">
    <div class="row">
        <div class="span4 offset4">
            <div id="login-panel">
                <div class="well bordered clearfix">
                    <div class="text-center">
                        <div class="page-header" style="border-bottom: none; margin: 0;">
                            <img src="library/img/logo-01.png"/>
                        </div>
                    </div>
                    <form method="POST" action="#" accept-charset="UTF-8" class="pull-left">
                        <legend>App name</legend>
                        <div class="control-group ">
                            <!-- username field -->
                            <div class="controls">
                                <label>Email</label>
                                <input class="span4" type="text" name="email" value="" id="email" placeholder="Your email address">
                            </div>
                        </div>

                        <div class="control-group">
                            <label>Password</label>
                            <!-- password field -->
                            <input type="password" name="password" id="password" placeholder="Password">
                        </div>
                        <div class="control-group ">
                            <p>
                                <input class="btn btn-default pull-left" type="submit" value="Sign-up">
                                <input class="btn btn-primary pull-right" type="submit" value="Login">
                            </p>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> <!-- end row -->
</div> <!-- end container -->
Max-width: 100% en los campos de entrada como se describe aquí: stackoverflow.com/questions/11855086/…

OriginalEl autor Niall O’Brien | 2012-08-30

2 Comentarios

  1. 31

    Docs están diciendo en realidad:

    Uso .span1 a .span12 para las entradas que coincidan con el mismo tamaño de la cuadrícula
    columnas.

    Pero quieres hacer una anchura completa <input>, ¿verdad?

    Hacer un <input> a tomar todo el ancho

    input.full-width {
        box-sizing: border-box;
        width: 100%;
        height: 30px;
    }

    También eliminar .pull-left de la <form>. Vea cómo funciona en este violín.


    Editar

    Desde Bootstrap 2.2.0 uso incluido input-block-level clase para lograr este efecto.

    Gracias por el .entrada de nivel de bloque sugerencia!
    Gracias, lástima que no lo menciona en sus documentos.
    yipeeeee…a mí me funcionó también con la versión 2, gracias

    OriginalEl autor Pavlo

  2. 0

    Me encontré con este problema recientemente con la forma y el panel de administración. Luego de la inspección me di cuenta de que el problema no estaba en los insumos, sino de la forma en sí se extiende más allá del panel. Me fijo por poner un max-width: 100% en el formulario en lugar de la entrada.

    OriginalEl autor dpsthree

Dejar respuesta

Please enter your comment!
Please enter your name here