Bootstrap navbar-expand-md在768px-992px高度增加且品牌下移求助

Hey there! I totally get how frustrating those tiny UI glitches can be—let's get this navbar sorted out for you.

What's Causing the Problem? #

In the 768px to 992px viewport range, Bootstrap's navbar-expand-md component hasn't switched to fully horizontal navigation yet. Your navigation links are wrapping onto multiple lines because there isn't enough horizontal space, and your custom navbar padding is amplifying the height increase. This is what's pushing your navbar-brand down slightly.

The Fix #

Add this custom CSS to target that specific breakpoint and adjust the layout:

/* Target the problematic viewport range */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Make nav links more compact to prevent wrapping */
  .navbar-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-size: 0.9rem;
  }

  /* Force navbar-brand to stay vertically centered */
  .navbar-brand {
    align-self: center;
  }

  /* Reduce navbar padding to control height */
  .navbar {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
}

Breakdown of the Changes: #

• Media Query: Targets exactly the 768px-992px range (using 991.98px to avoid overlap with Bootstrap's md breakpoint).
• Compact Nav Links: Reduces horizontal padding and font size to fit more links in a single line, preventing wrapping that increases navbar height.
• Centered Brand: Uses align-self: center to ensure the brand stays vertically aligned regardless of how the nav links are positioned.
• Adjusted Navbar Padding: Tweaks the top/bottom padding to keep the navbar height consistent without removing your custom styling entirely.

Optional Extra: Hide Less Critical Links (If Needed) #

If you still have wrapping issues even after the above changes, you could hide the "HYPE" link in this breakpoint (or any other non-essential link) to free up space:

@media (min-width: 768px) and (max-width: 991.98px) {
  .nav-custom-link {
    display: none;
  }
}

That should resolve the height increase and brand alignment problem. Test it out across the viewport range to make sure everything looks smooth!

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