1

Buenos días a todos,

estoy haciendo un formulario web en ASP con Bootstrap en dos columnas y para la versión móvil no me mantiene el ancho de los labels y queda un poco raro (no doy muchos detalles porque creo que viéndolo será más visual)

Escritorio:

Escritorio

Móvil:

Móvil

Código:

<div class="form-horizontal">
<div class="col-sm-6">
    <div class="form-group">
        <label for="MainContent_text_reg_nombre" class="col-sm-4 control-label">Empresa*:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_nombre" id="MainContent_text_reg_nombre" class="form-control" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_telefono" class="col-sm-4 control-label">Teléfono:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_telefono" id="MainContent_text_reg_telefono" class="form-control" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_email" class="col-sm-4 control-label">Email:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_email" id="MainContent_text_reg_email" class="form-control" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_web" class="col-sm-4 control-label">Web:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_web" id="MainContent_text_reg_web" class="form-control" type="text">
        </div>
    </div>
</div>
<div class="col-sm-6">
    <div class="form-group">
        <label for="MainContent_text_reg_direccion" class="col-sm-4 control-label">Dirección:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_direccion" id="MainContent_text_reg_direccion" class="form-control" onkeyup="sync()" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_localidad" class="col-sm-4 control-label">Localidad:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_localidad" id="MainContent_text_reg_localidad" class="form-control" onkeyup="sync()" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_provincia" class="col-sm-4 control-label">Provincia:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_provincia" id="MainContent_text_reg_provincia" class="form-control" onkeyup="sync()" type="text">
        </div>
    </div>
    <div class="form-group">
        <label for="MainContent_text_reg_cp" class="col-sm-4 control-label">CP:</label>
        <div class="col-sm-8">
            <input name="ctl00$MainContent$text_reg_cp" id="MainContent_text_reg_cp" class="form-control" onkeyup="sync()" type="text">
        </div>
    </div>
</div>

¿Alguna idea?

Gracias de antemano

1
  • 1
    Intente agregar un comentario pero no pude poner imagen así que no me quedo de otra que pooner como respuesta, y si bien no es una respuesta, espero te sirva. Saludos Commented el 28 dic. 2016 a las 12:47

2 respuestas 2

2

Debería ser un problema de algo que estés configurando en tu css, ya que tu codigo aparentemente está bien, y es mas lo pruebo y se adapta bien el responsive introducir la descripción de la imagen aquí

por lo tanto puedes verificar que no tengas ningun align o algo en tu css que esté afectando la clase del boostrapp

1
  • Tienes más razón que un santo... Estuve haciendo pruebas y había dejado un "display: flex; justify-content: center;" donde no tocaba. Muchas gracias
    – Andrés73
    Commented el 28 dic. 2016 a las 13:10
1

Amigo la estructura del codigo debe ser esta

<div class="form-group">
                <label for="phone" class="col-md-3 control-label">
                    <strong><span class="glyphicon glyphicon-phone" aria-hidden="true"></span></strong>
                </label>
                <input id="phone" name="phone" class="form-control" placeholder="Teléfono" value="">
        </div>

si agregas un div col va a descuadrarte el formulario

debes quitar este div

<div class="col-sm-8">

O en caso de que no te funcione puedes usar

<dl class="dl-horizontal">
        <dt>[label del campo]</dt>
        <dd>[Tu Campo]</dd>
</dl>

que es otra estructura de bootstrap muy usada para alinear contenidos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.