Bootstrap表单元素均匀间距调整问题求助

Hey there! I took a look at your code and the issue with your form's uneven spacing and misaligned submit button boils down to a couple of small Bootstrap class conflicts and default spacing behaviors. Let's break this down and fix it step by step:

1. Remove Duplicate Class Conflicts #

You've applied the add-item class twice (once on the outer container and once on the inner form wrapper). This is likely adding unintended padding/margin that's throwing off alignment. Remove the inner add-item class from this div:

<!-- Before -->
<div class="add-item text-center col-sm-12 col-md-12 col-lg-8">

<!-- After -->
<div class="text-center col-sm-12 col-md-12 col-lg-8">

2. Uniform Spacing with Flexbox #

Bootstrap's .form-group has a default margin-bottom: 1rem, but your submit button doesn't have matching spacing above it. Using flexbox on the form will let you set consistent gaps between all elements easily:

Update your form tag to use Bootstrap's flex utility classes:

<form class="mb-4 d-flex flex-column gap-3">

(Note: If you're using an older Bootstrap 4 version that doesn't support gap natively, replace gap-3 with adding mt-3 to the submit button and keeping the default .form-group margin.)

3. Ensure Button Alignment #

Your button uses col-12 which makes it full-width, but to make sure it aligns perfectly with the input boxes, double-check that:

• The form's parent container doesn't have any extra horizontal padding that's shifting elements
• The inputs and button are using the same width constraints (your current setup with col-12 on the button matches the full-width inputs, so this should be fine once the above fixes are applied)

Modified Form Code Snippet #

Here's how your updated form section should look:

<div class="text-center col-sm-12 col-md-12 col-lg-8">
  <form class="mb-4 d-flex flex-column gap-3">
    <div class="form-group">
      <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Todo Title">
    </div>
    <div class="form-group">
      <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Todo Description">
    </div>
    <button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
  </form>
</div>

Why This Works #

• Removing the duplicate add-item class eliminates conflicting padding/margin rules that were hard to track down via element inspection
• Using flexbox with gap-3 creates equal, consistent spacing between all form elements without having to manually adjust individual margins
• The full-width button will now align perfectly with the inputs since we've removed any unintended container styles

Give these changes a try, and your form should have clean, even spacing with no misaligned elements!

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