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.

django-bootstrap5 y alineación de botones

20 Jul, 2023 Programación

Quiero mostrar un botón junto a un formulario en lugar de debajo:

Así es como se ve:

enter image description here

debería verse así:

enter image description here

código correspondiente:

formulario:

class TheForm(forms.Form):
var = forms.ChoiceField(choices=choices, label=””)

temp

{% if TheForm %}

{% csrf_token %}
{% bootstrap_form TheForm %}
{% bootstrap_button button_type=”submit” content=”OK” %}

{% endif %}

EDITAR:
Lo logré funcionando, pero el código solo funciona con un campo de entrada:

enter image description here

Me lo imaginaba que se vería así:

enter image description here

pero el código producido también se ve extraño:


Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar el botón al lado del formulario en lugar de debajo, puedes envolver el formulario y el botón dentro de un div con la clase “row” y luego dividir el div en dos columnas: una para el formulario y otra para el botón. Aquí tienes un ejemplo de código:

    <form method="post">
  {% csrf_token %}
  <div class="row">
    <div class="col-md-9">
      {% bootstrap_form form %}
    </div>
    <div class="col-md-3">
      {% bootstrap_button button_type="submit" content="OK" %}
    </div>
  </div>
</form>

    Este código crea un formulario donde los campos del formulario ocupan 9 columnas y el botón ocupa 3 columnas en una fila. Al ajustar las clases de las columnas, puedes cambiar las proporciones de los elementos del formulario y del botón en la página.

    En cuanto al problema de que solo funciona un campo de entrada, es difícil decirlo sin ver todo tu código. Sin embargo, una cosa a comprobar es que estás utilizando el objeto de formulario correcto en tus etiquetas de plantilla. En el ejemplo de código anterior, el objeto de formulario se denomina “form”. Asegúrate de utilizar el nombre de variable correcto para tu formulario en tus etiquetas de plantilla.

Comments are closed.