Bootstrap 4表单宽度溢出无法适配内容的问题求助

Let's break down why your forms are overflowing and how to fix them step by step:

Root Causes of the Problem #

Looking at your code, a few key issues are causing the overflow:

• Hardcoded margin on .admin_section: margin-left: 35% forces your form container to start far from the left edge, leaving very little horizontal space for form elements—especially on smaller screens.
• Conflicting container padding: The Bootstrap container class already has built-in horizontal padding, and adding margin-left: 2rem to .admin_section_content further squeezes the available space for your forms.
• Too-narrow column widths: Using col-sm-2 for your input/button columns doesn't give enough room for elements like the "Refund Receipt" button, causing text to overflow.

Step-by-Step Fixes #

1. Fix the Container Layout #

First, replace the rigid margin on .admin_section with responsive Bootstrap classes to give your forms more breathing room:

.admin_section{
 margin-bottom: 1.5rem;
 /* Replace hardcoded left margin with responsive centering */
 max-width: 800px; /* Optional: Prevent overly wide forms on large screens */
 margin-left: auto;
 margin-right: auto;
}
.admin_section_content{
 font-family: 'Segoe UI', 'Open Sans', 'Helvetica Neue', sans-serif;
 /* Remove conflicting left margin */
 padding-left: 1rem; /* Optional: Use padding if you need subtle spacing */
}

2. Adjust Form Columns for Better Width Adaptation #

Modify your form's grid columns to give elements enough space, using Bootstrap's responsive classes:

<div class="admin_section">
 <h3>Removals</h3>
 <div class="admin_section_content container">
 <form method="post">
 <div class="form-group row">
 <label for="deleteName" class="col-sm-3 col-form-label">Remove a Menu Item</label>
 <!-- Wider column for input to avoid overflow -->
 <div class="col-sm-4">
 <input type="text" name="remove_item_name" pattern="^[a-zA-ZÀ-ÿ-' ]+$" maxlength="25" class="form-control" id="deleteName" placeholder="Food Item Name" required>
 </div>
 </div>
 <div class="form-group row">
 <label for="removeItem" class="col-sm-3 col-form-label"></label>
 <!-- Let button width adapt to its text -->
 <div class="col-sm-auto text-right">
 <button type="submit" class="btn btn-danger" id="removeItem" name="remove_item_button" value="clicked">Remove Item</button>
 </div>
 </div>
 </form>
 <br><br>
 <form method="post">
 <div class="form-group row">
 <label for="deleteReceipt" class="col-sm-3 col-form-label">Refund a Receipt</label>
 <div class="col-sm-4">
 <input type="text" name="remove_receipt_number" pattern="^\d{10}$" minlength="10" maxlength="10" class="form-control" id="deleteReceipt" placeholder="Receipt Number" required>
 </div>
 </div>
 <div class="form-group row">
 <label for="removeReceipt" class="col-sm-3 col-form-label"></label>
 <div class="col-sm-auto text-right">
 <button type="submit" class="btn btn-danger" id="removeReceipt" name="remove_receipt_button" value="clicked">Refund Receipt</button>
 </div>
 </div>
 </form>
 </div>
 </div>

3. Additional Tips #

• Test responsiveness: Resize your browser window to check how forms behave on mobile/tablet screens. If you still see overflow on small screens, use col-* classes (Bootstrap 4's extra-small breakpoint) to adjust column widths.
• Avoid overflow-x: hidden on body: While this hides scrollbars, it can clip valid content. Fixing the layout is a better long-term solution than hiding overflow.
• Leverage Bootstrap utilities: Use classes like mx-auto, px-3, my-4 for spacing instead of custom CSS to keep your code consistent with Bootstrap's system.

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