Django HTML表单页面布局问题求助：按钮错位与模态框干扰布局

问题1：按钮与Type字段并排布局 #

当前代码中Type输入框和按钮不在同一input-group容器内，导致按钮换行显示。需将输入框和按钮共同包裹在input-group中，利用Bootstrap输入组组件实现并排：

修改Type字段所在的col-md-3块：

<div class="col-md-3">
  <label for="inputType" class="form-label">Type</label>
  <!-- 将输入框和按钮放入同一个input-group -->
  <div class="input-group">
    {% render_field form.Type placeholder="Type" class="form-control"%}   
    <!-- Zoom Button Start-->
    <a href="" class="text-decoration-none input-group-text" 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 -->
  </div>
</div>

问题2：模态框导致布局混乱 #

模态框DOM元素嵌套在col-md-3的input-group内，会干扰Bootstrap网格布局计算。需将模态框整个移到主form标签外面，放在页面合适位置（如card-body末尾）——模态框为固定定位，不影响正常文档流布局：

将模态框代码从原位置移除，放到主form结束之后：

<!-- Modal 移到form外部 -->
<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>

完整修改后的代码 #

{% 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>
      <!-- 输入框与按钮放入同一个input-group -->
      <div class="input-group">
        {% render_field form.Type placeholder="Type" class="form-control"%}   
        <!-- Zoom Button Start-->
        <a href="" class="text-decoration-none input-group-text" 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 -->
      </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>
<!-- 模态框移到form外部 -->
<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>
{% endblock %}

内容的提问来源于stack exchange，提问作者abdullahsuzen