2

El problema que tengo es que cuando abro el formulario en el móvil, la label sale en un renglón y el input en otro. Esto no me es muy útil ya que me ocupa mucho espacio. Cuando lo ensancho un poco mas si que se ponen en el mismo renglón etiqueta e input. He intentado col-xs-4 y col-xs-8 para etiqueta e input a ver si así se ponen en una linea pero nada.

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row ">
		<div class=" col-md-12  col-xs-12 ">
			<form>
			    <div class="form-group row mb-0 ">
					<label  class="col-sm-2 col-form-label">Parte</label>
					<div class="col-sm-10">
						<input type="text" class="form-control form-control-sm " id="parte" placeholder="Parte">
					</div>
			</div>
				
			<div class="form-group row mb-0">
				<label for="staticEmail" class="col-sm-2  col-form-label">Fecha</label>
				<div class="col-sm-10 ">
					<div class="input-group date fecha" id="fechaP" data-target-input="nearest" >
						  <div class="input-group-prepend" data-target="#fechaP" data-toggle="datetimepicker" >
							<div class="input-group-text " ><i class="fa fa-calendar"></i></div>
						 </div>
						 <input type="text"  id="fecha" class="form-control  form-control-sm datetimepicker-input datetimepicker" placeholder="Fecha" data-target="#fechaP"/>
						
					</div>
				</div>
			</div>
   
   
			<div class="form-group row mb-0">
				<label for="staticEmail" class="col-sm-2 col-form-label">Hora Inicio</label>
				<div class="col-sm-10">
					<div class="input-group date hora" id="hInicioP" data-target-input="nearest" >
						  <div class="input-group-prepend hora" data-target="#hInicioP" data-toggle="datetimepicker">
							<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
						 </div>
						 <input type="text" id="hInicio" class="form-control  form-control-sm datetimepicker-input  " placeholder="Hora Inicio" data-target="#hInicioP"/>
						
					</div>
				</div>
			</div>
			
				<div class="form-group row mb-0">
				<label for="staticEmail" class="col-sm-2 col-form-label">Hora Fin</label>
				<div class="col-sm-10">
					<div class="input-group date hora" id="hFinP" data-target-input="nearest" >
						  <div class="input-group-prepend hora" data-target="#hFinP" data-toggle="datetimepicker">
							<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
						 </div>
						 <input type="text" id="hFin" class="form-control  form-control-sm datetimepicker-input  " placeholder="Hora Fin" data-target="#hFinP"/>
						
					</div>
				</div>
			</div>
<div class="form-group row mb-0">
					<label for="inputPassword" class="col-sm-2 col-form-label">Tipo Movimiento</label>
					<div class="col-sm-10">
						<select class="form-control form-control-sm" id="tipMovimiento">
							
						</select>
					</div>
				</div>
				<div class="form-group row mb-0">
					<label for="inputOrigen" class="col-sm-2 col-form-label ">Origen</label>
					<div class="col-sm-10">
						<select class="form-control form-control-sm centro"  id="origen">
							
						</select>
					</div>
				</div>
				
				<div class="form-group row mb-0">
					<label for="inputDestino" class="col-sm-2 col-form-label ">Destino</label>
					<div class="col-sm-10">
						<select class="form-control form-control-sm centro" id="destino" >
							
						</select>
					</div>
				</div>
				
				<div class="form-group row mb-0">
					<label for="inputChofer" class="col-sm-2 col-form-label">Chofer</label>
					<div class="col-sm-10">
						<select class="form-control form-control-sm " id="chofer">
							<option>Chofer</option>
						</select>
					</div>
				</div>
				
				<div class="form-group row mb-0">
					<label for="inputCamion" class="col-sm-2 col-form-label">Camión</label>
					<div class="col-sm-10">
						<select class="form-control form-control-sm " id="camion">
							
						</select>
					</div>
				</div>
				
				<div class="form-group row mb-3">
					<label for="inputCamion" class="col-sm-2 col-form-label">Observaciones</label>
					<div class="col-sm-10">
						<textarea class="form-control" id="observaciones" rows="2"></textarea>
					</div>
				</div>
			</form>
		</div>	
	</div>

1
  • Acabo de ver en la web de bootstrap que hay que usar col- para los dispositivos mas pequeños. Siento haber preguntado sin investigar lo suficiente Commented el 13 ago. 2019 a las 17:36

1 respuesta 1

3

Simplemente debes eliminar el xs (sufijo de col), debido a que en versiones posteriores de Bootstrap 4.x ya no se utiliza el sufijo xs (Extra small), en su caso solo sería col-[n]. Ejemplo: <div class="col-12">foo</div>

Nota: Puede ver en más detalles: Grid de Bootstrap

Retomando su código quedaría:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-12 col-12">
    <form>
      <div class="form-group row mb-0 ">
        <label class="col-2 col-form-label">Parte</label>
        <div class="col-10">
          <input type="text" class="form-control form-control-sm " id="parte" placeholder="Parte">
        </div>
      </div>

      <div class="form-group row mb-0">
        <label for="staticEmail" class="col-2 col-form-label">Fecha</label>
        <div class="col-10">
          <div class="input-group date fecha" id="fechaP" data-target-input="nearest">
            <div class="input-group-prepend" data-target="#fechaP" data-toggle="datetimepicker">
              <div class="input-group-text"><i class="fa fa-calendar"></i></div>
            </div>
            <input type="text" id="fecha" class="form-control  form-control-sm datetimepicker-input datetimepicker" placeholder="Fecha" data-target="#fechaP">
          </div>
        </div>
      </div>

      <div class="form-group row mb-0">
        <label for="staticEmail" class="col-2 col-form-label">Hora Inicio</label>
        <div class="col-10">
          <div class="input-group date hora" id="hInicioP" data-target-input="nearest">
            <div class="input-group-prepend hora" data-target="#hInicioP" data-toggle="datetimepicker">
              <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
            </div>
            <input type="text" id="hInicio" class="form-control  form-control-sm datetimepicker-input  " placeholder="Hora Inicio" data-target="#hInicioP" />

          </div>
        </div>
      </div>

      <div class="form-group row mb-0">
        <label for="staticEmail" class="col-2 col-form-label">Hora Fin</label>
        <div class="col-10">
          <div class="input-group date hora" id="hFinP" data-target-input="nearest">
            <div class="input-group-prepend hora" data-target="#hFinP" data-toggle="datetimepicker">
              <div class="input-group-text"><i class="fa fa-clock-o"></i></div>
            </div>
            <input type="text" id="hFin" class="form-control  form-control-sm datetimepicker-input  " placeholder="Hora Fin" data-target="#hFinP" />

          </div>
        </div>
      </div>
      <div class="form-group row mb-0">
        <label for="inputPassword" class="col-2 col-form-label">Tipo Movimiento</label>
        <div class="col-10">
          <select class="form-control form-control-sm" id="tipMovimiento">

          </select>
        </div>
      </div>
      <div class="form-group row mb-0">
        <label for="inputOrigen" class="col-2 col-form-label ">Origen</label>
        <div class="col-10">
          <select class="form-control form-control-sm centro" id="origen">

          </select>
        </div>
      </div>

      <div class="form-group row mb-0">
        <label for="inputDestino" class="col-2 col-form-label ">Destino</label>
        <div class="col-10">
          <select class="form-control form-control-sm centro" id="destino">

          </select>
        </div>
      </div>

      <div class="form-group row mb-0">
        <label for="inputChofer" class="col-2 col-form-label">Chofer</label>
        <div class="col-10">
          <select class="form-control form-control-sm " id="chofer">
            <option>Chofer</option>
          </select>
        </div>
      </div>

      <div class="form-group row mb-0">
        <label for="inputCamion" class="col-2 col-form-label">Camión</label>
        <div class="col-10">
          <select class="form-control form-control-sm " id="camion">

          </select>
        </div>
      </div>

      <div class="form-group row mb-3">
        <label for="inputCamion" class="col-2 col-form-label">Observaciones</label>
        <textarea class="col-10 form-control" id="observaciones" rows="2"></textarea>
      </div>
    </form>
  </div>
</div>

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.