1

Tengo 2 campos de formulario que son 2 input text. Uno hace como de prefijo del nombre y el otro es el nombre.

Este es el aspecto: introducir la descripción de la imagen aquí

Lo que necesita es quitarel espacio que hay entre el primer input text (el deshabilitado) y el segundo, ya que la función de estos dos es que el primero sirva como prefijo al segundo.

Quiero que quede una cosa así:

introducir la descripción de la imagen aquí

Esta hecho todo con Bootstrap. Mi pregunta es si hay alguna forma de hacerlo con Bootstrap.

Mi código:

<div class="row">
<div class="col-xs-3" id="hideDiv">
    <div class="form-group">
        <input id="prefijoAlmacen" type="text" id="general-text" name="general-text" class="form-control" value="" disabled />
        <span class="mensajeErrorNombre"></span>
    </div>
</div>
<div class="col-xs-4">
    <div class="form-group">
        <input id="modalNombre" type="text" id="general-text" name="general-text" class="form-control" value="" />
    </div>
</div>

<div class="col-sm-4">
    <div class="form-group">
    </div>
</div>

He probado a poner otro div row dentro de la columna, pero nada; he probado a poner los 2 inputs dentro del mismo, pero tampoco funciona...

¿Alguna idea?

Gracias.

1 respuesta 1

4

Veo que estás usando Bootstrap 3.x entonces deberías crear unas clases de ayudas (helper class).

Te he creado 2:

  1. Para quitar el padding de la izquierda en cuando tenga la clase col-*:
div[class*='col-'].p-l-0 {
  padding-left: 0;
}
  1. Para quitar el padding de la derecha en cuando tenga la clase col-*:
div[class*='col-'].p-r-0 {
  padding-right: 0;
}

Veamos las clases en acción:

div[class*='col-'].p-l-0 {
  padding-left: 0;
}

div[class*='col-'].p-r-0 {
  padding-right: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="row">
<div class="col-xs-3 p-r-0" id="hideDiv">
    <div class="form-group">
        <input id="prefijoAlmacen" type="text" id="general-text" name="general-text" class="form-control" value="" disabled />
        <span class="mensajeErrorNombre"></span>
    </div>
</div>
<div class="col-xs-4 p-l-0">
    <div class="form-group">
        <input id="modalNombre" type="text" id="general-text" name="general-text" class="form-control" value="" />
    </div>
</div>

<div class="col-sm-4">
    <div class="form-group">
    </div>
</div>

Nota: Si no quieres que este tan pegado, creas simplemente más clases con los paddings deseados.

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.