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.

No se pueden mostrar las etiquetas junto al campo de entrada usando Bootstrap 5.1.3.

26 Jul, 2023 Programación 

  

    
    

      
    

  




Parece muy simple hacer esto, pero no logro hacer que se muestre una etiqueta antes de un elemento de entrada. La etiqueta se muestra encima del elemento de entrada. Incluso cuando copio directamente el ejemplo de bootstrap.com, la etiqueta se sigue mostrando encima del elemento de entrada y no al lado.

Ver: https://getbootstrap.com/docs/5.0/forms/layout/#horizontal-form para el ejemplo que he utilizado.

Bootstrap versión 5.1.3
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está con la clase utilizada para el elemento de etiqueta. En lugar de usar “col-sm2 col-form-label col-form-label-sm”, debemos usar “col-sm-2 col-form-label col-form-label-sm” con un guion “-” entre “sm” y “2”. Esto asegurará que la etiqueta se muestre junto al elemento de entrada en un diseño de formulario horizontal.

    El código corregido debería verse así:

    <form>
  <div class="row mb-3">
    <label for="name" class="col-sm-2 col-form-label col-form-label-sm">Nombre</label>
    <div class="col-sm-10">
      <input type="text" class="form-control form-control-sm" id="name" required="">
    </div>
  </div>
</form>

    Espero que esto ayude a resolver el problema.

Comments are closed.