Bootstrap列窗口缩小时重叠求助：固定Navbar与Scrollspy异常

Hey there! I’ve run into this exact issue before when mixing Bootstrap’s affix with responsive grid columns—let’s break down what’s happening and how to fix it.

The root problem here is that the affix class forces fixed positioning on your left navbar, which pulls it out of the normal document flow. On small screens, Bootstrap’s grid is supposed to stack the col-md-3 and col-md-9 columns vertically, but the fixed positioning bypasses that stacking behavior, causing the overlap. Here are a few reliable solutions:

1. Use Bootstrap’s sticky-top Instead of Affix (Recommended) #

If you’re using Bootstrap 4 or later, the affix component was deprecated in favor of the sticky-top utility class. This class is built to work seamlessly with Bootstrap’s responsive grid, so it’ll automatically stop sticking and let columns stack when the screen shrinks.

Just replace your affix setup with this:

<div class="col-md-3 sticky-top">
  <!-- Your vertical navbar with Scrollspy here -->
</div>
<div class="col-md-9">
  <!-- Your content area here -->
</div>

No extra JavaScript needed—Bootstrap handles the sticky behavior and responsive stacking out of the box. Your Scrollspy should still work as long as you’ve set up the data-spy and data-target attributes correctly on the body or content container.

2. Disable Affix on Small Screens (For Older Bootstrap Versions) #

If you’re stuck using Bootstrap 3 or need to keep the affix component, you can use media queries to turn off fixed positioning when the screen hits the grid’s stacking breakpoint (767px for md columns).

First, add this CSS:

/* Disable affix on screens smaller than 768px */
@media (max-width: 767px) {
  .affix {
    position: static !important;
    top: auto !important;
  }
}

Then, adjust your affix initialization JavaScript to only apply fixed positioning on larger screens:

$('#your-navbar-id').affix({
  offset: {
    top: 50, // Adjust based on your layout
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true)) || 0;
    }
  }
}).on('affixed.bs.affix', function() {
  // Only enforce fixed positioning on large screens
  if ($(window).width() < 768) {
    $(this).removeClass('affix').addClass('affix-top');
  }
});

This ensures that on small screens, the navbar stays in the document flow and stacks naturally with the content column.

3. Double-Check Your Grid Structure #

Make sure you’re wrapping your columns in a proper .row inside a .container or .container-fluid:

<div class="container">
  <div class="row">
    <div class="col-md-3 sticky-top">
      <!-- Navbar -->
    </div>
    <div class="col-md-9">
      <!-- Content -->
    </div>
  </div>
</div>

Missing the .row or using incorrect container classes can sometimes cause unexpected layout conflicts, especially when combining with fixed/sticky elements.

Final Notes #

Whichever solution you choose, test it across different screen sizes to make sure Scrollspy still works correctly when the layout stacks. If you’re using a collapsible navbar on small screens, you might also want to adjust the Scrollspy target to point to the collapsed menu toggle to keep the experience consistent.

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