0

Me gustaría poder quitarle algo de margen inferior a los campos input, ya que mi idea es usar la aplicación en móvil y necesito mucho espacio.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class=" col-md-12  col-xs-12 ">
    <form>
      <div class="form-group row ">
        <label for="staticEmail" class="col-sm-2 col-form-label">Fecha / Hora Inicio</label>
        <div class="col-sm-10">
          <input type="text" class="form-control form-control-sm " id="fechaInicio" placeholder="Fecha / Hora Inicio">
        </div>
      </div>
      <div class="form-group row">
        <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">
            <option>Tipo Movimiento</option>
          </select>
        </div>
      </div>
      <div class="form-group row">
        <label for="inputOrigen" class="col-sm-2 col-form-label">Origen</label>
        <div class="col-sm-10">
          <select class="form-control form-control-sm">
            <option>Origen</option>
          </select>
        </div>
      </div>
      <div class="form-group row">
        <label for="inputDestino" class="col-sm-2 col-form-label">Destino</label>
        <div class="col-sm-10">
          <select class="form-control form-control-sm">
            <option>Destino</option>
          </select>
        </div>
      </div>
      <div class="form-group row">
        <label for="inputChofer" class="col-sm-2 col-form-label">Chofer</label>
        <div class="col-sm-10">
          <select class="form-control form-control-sm">
            <option>Chofer</option>
          </select>
        </div>
      </div>
      <div class="form-group row">
        <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">
              <option>Camión</option>
           </select>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

3
  • 4
    La clase .form-group añade por defecto un margin-botom: 1rem, haz una regla CSS que la pise y que se ajuste a lo que necesitas. Recuerda que el inspeccionador de las herramientas de desarrollo de tu navegador es una herramienta indispensable para poder maquetar.
    – phpMyGuel
    Commented el 6 ago. 2019 a las 11:16
  • He creado una clase y se la he aplicado, pensaba que igual había algo especifico de Bootstrap como un mb-0 o algo asi. Gracias Commented el 6 ago. 2019 a las 12:16
  • Podrías quitar la clase .form-group de tus elementos, ya que no necesitas de ella lo único que hacen, que es darle ese margin-bottom: 1rem y ponerle en vez la de eso la tuya propia.
    – phpMyGuel
    Commented el 6 ago. 2019 a las 12:22

1 respuesta 1

4

Con bootstrap 4 puedes aplicar las clases my-0 y py-0 directamente en tu etiqueta input o .form-group, con ellos lo que se busca es dejar el margen y padding vertical en 0.

También, si solo quieres alterar el margen inferior puedes reemplazar la Y por una B, de bottom, mb-0 y pb-0.

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.