2

Me gustaría que este formulario al ponerse en responsive, las etiquetas se pusieran a la izquierda de las entradas de texto, ahora mismo se pone arriba la etiqueta y debajo la caja de texto. he intentado poniendo al lado col-xs* pero no lo consigo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<form name="miFormulario1" class="form-horizontal ">
  <div class="form-group">
    <label class="col-md-2 control-label">Nombre:</label>
    <div class="col-md-10">
      <input type="text" id="idNombreT" name="txt_Nombre" class="form-control input-sm">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Seguimiento:</label>
    <div class="col-md-3">
      <select class="form-control input-sm col-md-1 " id="idSeguimiento">

      </select>
    </div>
    <div class="col-md-7 ">
      <button type="button" id="btnHistoria" class="btn btn-default btn-sm right-align ">Historia</button>
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-2 control-label">Descipcion:</label>
    <div class="col-md-10">
      <input type="text" id="idDescripcionT" name="txt_Descripcion" class="form-control input-sm">
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Responsable:</label>
    <div class="col-md-10">
      <select class="form-control input-sm col-md-1 " id="idResponsable">

      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2 control-label">Delegar a:</label>
    <div class="col-md-10">
      <select class="form-control input-sm col-md-1 " id="idDelegar">

      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-md-2  control-label" id="idEstadoActualT">Estado Actual:</label>
    <div class="col-md-2">
      <select class="form-control input-sm col-md-1" id="idEstadoT" readonly>

      </select>
    </div>
    <div class="col-md-8">
      <input type="text" id="id_dscEstactual" name="txt_Descripcion" class="form-control input-sm">
    </div>
  </div>
</form>

2 respuestas 2

1

Quizás tengas que tocar más cosas pero si te fijas en el cambio de responsive, verás que la clase col-md-10 (asociada al div del input) cambia a float:left cuando el ancho de la página pasa de 992px que es lo que hace que se muestre en el lugar que tú quieres. Además, debes tener en cuenta que el width de dicho div se debe ajustar según el espacio que quede libre para que pueda ir en la misma línea que la etiqueta

3
  • Gracias, he intentado forzar la posición con float pero no consigo resultados Commented el 14 sept. 2018 a las 16:27
  • ¿Has actualizado también el width? Commented el 14 sept. 2018 a las 17:35
  • No tengo ni idea de cómo hacerlo, me he dado cuenta de q cuando so tengo un campo en el form-group. Usando la clase col-xs lo hace bien, pero cuando tengo varios campos dentro del mismo form-group es cuando se descuadra Commented el 14 sept. 2018 a las 21:49
1

Imagino que con "al ponerse en responsive" te refieres al reducir el ancho de la página, ¿no?. En cuanto a lo de que "las etiquetas se pusieran a la izquierda", ¿no es lo mismo que cuando el diseño es ancho?

Aún así cambiando todo por col-xs-* funciona como deseas, aunque quedaría saber si hay algún detalle que nos estamos pasando por algo (que hayas podido omitir en la pregunta).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<form name="miFormulario1" class="form-horizontal ">
  <div class="form-group">
    <label class="col-xs-2 control-label">Nombre:</label>
    <div class="col-xs-10">
      <input type="text" id="idNombreT" name="txt_Nombre" class="form-control input-xs">
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2 control-label">Seguimiento:</label>
    <div class="col-xs-3">
      <select class="form-control input-sm col-xs-1 " id="idSeguimiento">

      </select>
    </div>
    <div class="col-xs-7 ">
      <button type="button" id="btnHistoria" class="btn btn-default btn-sm right-align ">Historia</button>
    </div>
  </div>

  <div class="form-group">
    <label class="col-xs-2 control-label">Descripción:</label>
    <div class="col-xs-10">
      <input type="text" id="idDescripcionT" name="txt_Descripcion" class="form-control input-sm">
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2 control-label">Responsable:</label>
    <div class="col-xs-10">
      <select class="form-control input-sm col-xs-1 " id="idResponsable">

      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2 control-label">Delegar a:</label>
    <div class="col-xs-10">
      <select class="form-control input-sm col-xs-1 " id="idDelegar">

      </select>
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-2  control-label" id="idEstadoActualT">Estado Actual:</label>
    <div class="col-xs-2">
      <select class="form-control input-sm col-xs-1" id="idEstadoT" readonly>

      </select>
    </div>
    <div class="col-xs-8">
      <input type="text" id="id_dscEstactual" name="txt_Descripcion" class="form-control input-sm">
    </div>
  </div>
</form>

Quizá sería mejor usar <div class="form-group row"> que un <div class="form-group"> poder dar un tamaño fijo col-* por defecto y uno adaptado col-*-* cuando aumente.

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.