Django，html页面我无法修复布局问题

Question

我正在尝试在 html 表单页面中进行布局，但有 2 个问题。

1- 正如您在下面的屏幕截图 1 中看到的，我想在类型字段旁边添加一个按钮，但该按钮出现在类型字段下方。无论我做什么，我都无法并肩。

2-当我将模式连接到我添加的按钮时，它会破坏其后面的所有页面布局。您可以在截图 2 中找到它。

这是我的html代码：

{% extends 'base.html' %}
{% load widget_tweaks %}
{% block content %}

<div class="container-fluid px-5 mt-5">
<div class="card card-body">
<div class="container-fluid px-5 mt-5">
    <h1>Record Detail Page</h1>
</div>
<div class="container-fluid px-5 mt-5">
<form class="row g-4" method="post">
    {% csrf_token %}
    <div class="col-md-3">
      <label for="inputDirection" class="form-label">Direction</label>
      {% render_field form.Direction class="form-control"%}
    </div>
    <div class="col-md-3">
      <label for="inputType" class="form-label">Type</label>
      {% render_field form.Type placeholder="Type" class="form-control"%}   
      <!-- Zoom Button Start-->
      <div class="input-group">
      <a href="" class="text-decoration-none" data-bs-toggle="modal" data-bs-target="#typeRecordModal">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707l-4.096 4.096z"></path>
        </svg>
        </a> 
      
        <!-- Zoom Button End -->
        <!-- Modal -->
        <div class="modal fade" id="typeRecordModal" tabindex="-1" aria-labelledby="recordModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h1 class="modal-title fs-5" id="recordModalLabel">Modal title</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <!-- modal icerisinde form start -->
                <form id="typeFormModal" class="row g-4" method="post">
                  {% csrf_token %}
                  <div class="mb-auto">
                      <label for="inputType" class="form-label">Type</label>
                      {% render_field formtype.Type class="form-control" %}
                  </div>
                  <div class="mb-auto">
                      <label for="inputTypeDescription" class="form-label">Type Description</label>
                      {% render_field formtype.Type_Desc class="form-control" placeholder="Açıklama Giriniz!" %}
                  </div>
                  <br>
                  <div class="mb-auto">
                      <button type="submit" class="btn btn-primary" name="formtype_submit">Save</button>
                  </div>
              </form>
               <!-- modal icerisinde form end -->
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
        <label for="inputSubType" class="form-label">Sub_Type</label>
      {% render_field form.Sub_Type class="form-control"%}
      <!-- Zoom Button Start -->
      <a href="" class="text-decoration-none">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707l-4.096 4.096z"></path>
        </svg>
      </a>
      <!-- Zoom Button End-->
    </div>
    <div class="col-md-3">
        <label for="inputCustomer" class="form-label">Customer</label>
      {% render_field form.Customer class="form-control"%}
    </div>



    <div class="col-md-3">
        <label for="inputAmount" class="form-label">Amount</label>
       {% render_field form.Amount class="form-control"%}
    </div>
    <div class="col-md-3">
        <label for="inputCurrency" class="form-label">Currency</label>
        {% render_field form.Currency class="form-control"%}
    </div>
    <div class="col-md-3">
          <label for="inputTL_Amount" class="form-label">TL_Amount</label>
        {% render_field form.TL_Amount class="form-control"%}
    </div>
    <div class="col-md-3">
          <label for="inputCurrency_Rate" class="form-label">Currency_Rate</label>
        {% render_field form.Currency_Rate class="form-control"%}
    </div>



    <div class="col-6">
      <label for="inputPaid_TL_Amount" class="form-label">Paid_TL_Amount</label>
       {% render_field form.Paid_TL_Amount class="form-control"%}
    </div>
    <div class="col-6">
      <label for="inputRemaining_TL_Amount" class="form-label">Remaining_TL_Amount</label>
       {% render_field form.Remaining_TL_Amount class="form-control"%}
    </div>

    <div class="col-4">
      <label for="inputStatus" class="form-label">Status</label>
       {% render_field form.Status class="form-control"%}
    </div>
    <div class="col-4">
      <label for="inputClose_Date" class="form-label">Close_Date</label>
      {% render_field form.Close_Date  type="date" class="form-control"%}
    </div>
    <div class="col-4">
      <label for="inputClose_Date" class="form-label">Record_Date</label>
      {% render_field form.Record_Date type="date" class="form-control"%}
    </div>
    <div class="col-6">
      <label for="inputPeriod" class="form-label">Period</label>
      {% render_field form.Period class="form-control"%}
    </div>
    <div class="col-6">
      <label for="inputExpiry_Date" class="form-label">Expiry_Date</label>
      {% render_field form.Expiry_Date type="date" class="form-control"%}
    </div>
    <div class="col-12">
      <button type="submit" class="btn btn-primary" name="form_submit">Save</button>
    </div>
</form>
</div>
</div>
</div>
{% endblock %}

Answer 1

其他形式中还有其他形式。 尝试在第一个形式之外放置一个模态形式。