es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Distancia más corta entre la etiqueta y el elemento de entrada.

30 May, 2023 Programación

Tengo un formulario HTML diseñado con clases de Bootstrap. Me gustaría reducir la distancia entre la <label> (más precisamente, el texto) y el elemento <input>, ya que están dispuestos horizontalmente en un punto de interrupción más pequeño que sm (576px).

actualmente se ve así

La distancia entre “Anzahl” y el input numérico debería ser más pequeña.

Este es mi código actual:

<div class="row justify-content-lg-center">         
        <div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
            <label for="numAmount" class="form-label">Anzahl</label>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <input type="number" class="form-control" id="numAmount" required>
        </div>        
    </div>

    <div class="row justify-content-lg-center">         
        <div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
            <label for="datDate" class="form-label">Datum</label>
        </div>
        <div class="col-12 col-sm-6 col-lg-3">
            <input type="date" class="form-control" id="datDate" value="<? echo date("Y-m-d"); ?>" required>
        </div>        
    </div>
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para reducir la distancia entre los elementos <label> y <input> en los puntos de interrupción más pequeños, puede agregar clases personalizadas a sus elementos de etiqueta e entrada dentro de su formulario HTML de Bootstrap. Por ejemplo, puede agregar una clase de form-label-sm a su elemento <label> y una clase de form-control-sm a su elemento <input>. Luego, en su archivo CSS, puede definir los siguientes estilos para reducir el espacio entre la etiqueta y el elemento de entrada:

    @media (max-width: 576px) {
  .form-label-sm {
    margin-bottom: 0.25rem;
  }

  .form-control-sm {
    margin-top: 0.25rem;
  }
}

    Estos estilos se aplicarán solo a los puntos de interrupción más pequeños donde el ancho de la pantalla sea menor o igual a 576 píxeles. Puede ajustar los valores del margen según sus necesidades.

    Aquí está el código HTML modificado:

    <div class="row justify-content-lg-center">         
  <div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
    <label for="numAmount" class="form-label form-label-sm">Anzahl</label>
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <input type="number" class="form-control form-control-sm" id="numAmount" required="">
  </div>        
</div>

<div class="row justify-content-lg-center">         
  <div class="col-12 col-sm-6 col-lg-3 d-flex justify-content-md-end">
    <label for="datDate" class="form-label form-label-sm">Datum</label>
  </div>
  <div class="col-12 col-sm-6 col-lg-3">
    <input type="date" class="form-control form-control-sm" id="datDate" value="<? echo date(" y-m-d");="">" required>
  </div>        
</div>

Comments are closed.