如何为Accordion添加滚动功能并解决布局错位问题

Let’s tackle your accordion problems step by step—first we’ll fix the layout misalignment, then set up proper scroll behavior for overflowing content.

What’s Wrong with the Original Code? #

• Invalid HTML Structure: Unclosed <label> tags, messy nesting of Bootstrap row/col classes, and repeated id attributes (multiple inputs using id="emp") are causing layout glitches.
• No Proper Scroll Container: The #ex1 div wasn’t configured with CSS to handle overflow, so adding scroll caused unexpected behavior.
• Bad Spacing: Using <br> tags for spacing isn’t the Bootstrap way—it leads to inconsistent layouts across screen sizes.

Fixed Solution #

First, add this CSS to your stylesheet (or a <style> tag) to enable smooth scrolling on the accordion body:

#ex1 {
  max-height: 400px; /* Adjust this value to fit your design needs */
  overflow-y: auto;
  padding-right: 15px; /* Prevent content from being hidden under the scrollbar */
}

/* Optional: Customize scrollbar appearance */
#ex1::-webkit-scrollbar {
  width: 8px;
}
#ex1::-webkit-scrollbar-track {
  background: #f1f1f1;
}
#ex1::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
#ex1::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Then replace your original HTML with this cleaned-up version:

<!----Starts second column-------->
<div class="col-sm-12 col-md-6">
  <div class="panel panel-default">
    <div class="panel-heading" style="background-color: #b3daff;">
      <h4 class="panel-title">
        <a href="#"><span class="glyphicon glyphicon-remove" style="color: red"></span></a>
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <span style="font-weight: 700;">Educational Details</span>
          <span class="glyphicon glyphicon-plus" style="color: red">&nbsp;</span>
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body p-0"> <!-- Remove default padding to fit scroll container -->
        <div class="col-sm-12 col-md-12 p-3" id="ex1"> <!-- Fixed col classes and added padding -->
          <div class="form-group mb-3"> <!-- Use mb-3 for consistent spacing instead of <br> -->
            <label class="control-label">Degree Stream</label>
          </div>

          <!-- 10th Grade -->
          <div class="form-group mb-3">
            <label class="control-label col-md-3 col-form-label">10th</label>
            <div class="col-md-9">
              <div class="row">
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-10th-1" required placeholder="Field 1" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-10th-2" required placeholder="Field 2" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-10th-3" required placeholder="Field 3" />
                </div>
              </div>
            </div>
          </div>

          <!-- 12th Grade -->
          <div class="form-group mb-3">
            <label class="control-label col-md-3 col-form-label">12th</label>
            <div class="col-md-9">
              <div class="row">
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-12th-1" required placeholder="Field 1" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-12th-2" required placeholder="Field 2" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-12th-3" required placeholder="Field 3" />
                </div>
              </div>
            </div>
          </div>

          <!-- Degree -->
          <div class="form-group mb-3">
            <label class="control-label col-md-3 col-form-label">Degree</label>
            <div class="col-md-9">
              <div class="row">
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-degree-1" required placeholder="Field 1" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-degree-2" required placeholder="Field 2" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-degree-3" required placeholder="Field 3" />
                </div>
              </div>
            </div>
          </div>

          <!-- Masters -->
          <div class="form-group mb-3">
            <label class="control-label col-md-3 col-form-label">Masters</label>
            <div class="col-md-9">
              <div class="row">
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-masters-1" required placeholder="Field 1" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-masters-2" required placeholder="Field 2" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-masters-3" required placeholder="Field 3" />
                </div>
              </div>
            </div>
          </div>

          <!-- Certificate -->
          <div class="form-group mb-3">
            <label class="control-label col-md-3 col-form-label">Certificate</label>
            <div class="col-md-9">
              <div class="row">
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-cert-1" required placeholder="Field 1" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-cert-2" required placeholder="Field 2" />
                </div>
                <div class="col-md-4">
                  <input type="text" class="form-control" id="emp-cert-3" required placeholder="Field 3" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!----Ends second column-------->

Key Fixes Explained #

1. Cleaned HTML Structure: Fixed unclosed tags, corrected row/col nesting, and gave each input a unique id to avoid conflicts.
2. Scroll Container Setup: The #ex1 div now has a fixed max-height and overflow-y: auto, so content will scroll smoothly when it exceeds the container height. We added padding to prevent content from being hidden under the scrollbar.
3. Consistent Spacing: Replaced <br> tags with Bootstrap’s mb-3 (margin-bottom) class for consistent spacing across all devices.
4. Label Alignment: Used col-form-label to ensure labels align perfectly with input fields in Bootstrap’s grid system.

Now your accordion should have a smooth scroll for overflowing content, and all labels/textboxes will stay properly aligned!

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