Crispy 表单响应式输入字段问题

Question

问题

我正在使用 Django、Bootstrap 和 Crispy Forms 在 Django 网站上生成输入表单。 我很难按要求设置响应度。

在屏幕宽度大于 575px 时，输入字段是所需的宽度，并根据需要在容器内完美居中。

然而，当宽度小于 575px 时，表单看起来像这样，输入字段占据了容器的整个宽度。这是不可取的，我希望输入字段保持居中并随着屏幕尺寸的减小而响应地修改它的宽度。

我试过的

表单由

form-select

和

form-control

类组成，具体取决于输入法（分别为下拉菜单和自由文本）。 因此，我尝试使用 Bootstrap 的媒体查询，并尝试在 CSS 文件中使用以下代码的变体。

@media (max-width: 575px) {
  .form-select {
      width: 90%;
  }
}

不幸的是，这似乎无法解决问题。

这是表单的整个 HTML：

<div class="container">
  <div class="row justify-content-center" style="margin-top: -100px;">

     <!-- CALC LEFT -->
     <div class="col-md-4 mb-4 mb-md-0">
     <div class="border rounded bg-light h-100">
        <div class="row justify-content-center">

           <!-- <h1 class="text-center"> Car Finance Calculator</h1> -->
           <h5 class="text-center"> Enter details for your estimate</h5>
        </div>
        <br>
        <div class="col-sm-10  mx-auto">
           <form action="" method="POST">
              {% csrf_token %}
              <div class="form-floating mb-3">
                 {{form.starting_amount}}
                 <label for="{{ form.starting_amount.id_for_label }}">Amount to Borrow</label>
              </div>
              <div class="form-floating mb-3">
                 {{form.deposit_amount}}
                 <label for="{{ form.deposit_amount.id_for_label }}">Deposit Amount</label>
              </div>
              <div class="form-floating mb-3">
                 {{form.trade_in_value }}
                 <label for="{{ form.trade_in_value.id_for_label }}">Trade-in Value</label>
              </div>
              <div class="form-floating mb-3">
                 {{form.number_of_years }}
                 <label for="{{ form.number_of_years.id_for_label }}">Duration of Loan</label>
              </div>
              <div class="form-floating mb-3">
                 {{form.credit_score }}
                 <label for="{{ form.credit_score.id_for_label }}">Credit Score</label>
              </div>
              <div class="form-floating mb-3">
                 {{form.state }}
                 <label for="{{ form.state.id_for_label }}">Your State</label>
              </div>
              <br>
              <button class="btn btn-primary" type="submit">Calculate</button>                
           </form>
           <br>
        </div>
     </div>
     </div>

     <!-- CALC RIGHT -->
     <!-- RESULTS TOP -->
     <div class="col-md-4">
     <div class="border rounded bg-white h-100">
        <div class="row justify-content-center">
           <h3 class="text-center">Your estimated payment</h3>
           <h2 class="text-center">${{ monthly_repay }}/mo</h2>
           <p class="text-center" style="font-size: 11px;">Based on {{ credit_score_perc }}% APR*</p>
           <!-- <h3> After {{ number_of_years }} years, your investment is worth ${{ total_result }}</h3>-->
        </div>
        <div class="col-md-10 mx-auto">
           <div class="row justify-content-between">
              <div class="col-6 text-left">
                 Car price
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="The cost of the new vehicle">
                 </i>
              </div>
              <div class="col-4 text-left">
                 ${{ starting_amount|floatformat:"g"}}
              </div>
           </div>
           <br>
           <div class="row justify-content-between">
              <div class="col-6 text-left">
                 Down payment
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="Deposit for new vehicle">
                 </i>
              </div>
              <div class="col-4">
                 -${{ deposit_amount|floatformat:"g" }}
              </div>
           </div>
           <br>
           <div class="row justify-content-between">
              <div class="col-6 text-left">
                 Trade-in value
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="Value of trade-in vehicle">
                 </i>
              </div>
              <div class="col-4">
                 -${{ trade_in_value|floatformat:"g" }}
              </div>
           </div>
           <br>
           <div class="row justify-content-between">
              <div class="col-6 text-left"> 
                  Sales tax ({{ sales_tax.combinedrate }}%)
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="Estimated state sales tax">
                 </i>
              </div>
              {% for item in sales_tax %}
              <div class="col-4">
                 +${{ tax_amount|floatformat:"g" }} 
              </div>
              {% endfor %}
           </div>
           <br>
           <div class="position-relative w-100 top-50 start-0 border-muted border-top"></div>
           <br>
           <!-- RESULTS BOTTOM -->
           <div class="row justify-content-between">
              <div class="col-6 text-left fw-bold">
                 Total loan amount
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="Total amount to borrow">
                 </i>
              </div>
              <div class="col-4">
                 ${{ total_loan|floatformat:"g" }}
              </div>
           </div>
           <br>
           <div class="row justify-content-between">
              <div class="col-6 text-left fw-bold">
                 Total interest
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="Total interest during loan">
                 </i>
              </div>
              <div class="col-4">
                 ${{ total_interest|floatformat:"g" }}
              </div>
           </div>
           <br>
           <div class="row justify-content-between">
              <div class="col-6 text-left fw-bold">
                 Total loan & interest
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="Combined loan and interest">
                 </i>
              </div>
              <div class="col-4">
                 ${{ total_interest_and_loan|floatformat:"g"}}
              </div>
           </div>
           <br>
           <div class="row justify-content-between">
              <div class="col-6 text-left fw-bold">
                 Monthly payment
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="Amount to pay per month">
                 </i>
              </div>
              <div class="col-4">
                 ${{ monthly_repay|floatformat:"g" }}
              </div>
           </div>
           <br>
           <div class="row justify-content-between">
              <div class="col-6 text-left fw-bold">
                 No. of Payments
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="Number of payments during loan">
                 </i>
              </div>
              <div class="col-4">
                 {{ number_of_payments|floatformat:"g" }}
              </div>
           </div>
           <br>
           <div class="row justify-content-between">
              <div class="col-6 text-left fw-bold">
                 APR
                 <i class="fas fa-info-circle fa-xs" 
                    data-bs-toggle="tooltip" 
                    data-bs-toggle="tooltip" data-bs-html="true" title="Estimated APR based on your credit score">
                 </i>
              </div>
              <div class="col-4">
                 {{ credit_score_perc }}%
              </div>
           </div>
        </div>
     </div>
     </div>
     <br>