Glitchy behavior in twitter-bootstrap responsive menu

Problem

I'm trying to get the menu bar of an example on the tb website to be a constant height throughout and I ran into a bit of odd behavior.

In the following demo:

http://twitter.github.com/bootstrap/examples/fluid.html

If you resize your browser to about 1070/1080 px width, the bar jumps to an ugly height and then back down. It's as if there's a media query somewhere in the responsive css that hasn't accounted for a ~2px range in browser width. I'm using this as a baseline for my application and would absolutely appreciate any suggestions on how to get this fixed.

Problem courtesy of: SB2055

Solution

The issue comes from some page specific style (from fluid.html):

@media (max-width: 980px) {
    .navbar-text.pull-right {
        float: none;
        padding-left: 5px;
        padding-right: 5px;
    }
}

vs some external CSS (from bootstrap-responsive.css):

@media (max-width: 979px) {
    .nav-collapse .nav {
        float: none;
        margin: 0 0 10px;
    }
}

As you can see, there is a 1px difference between those media-queries. If you were to edit the first to also use 979px, things would not jump any more.

Solution courtesy of: Steve

Discussion

There's a spot in there where .navbar-text.pull-right goes to {float: none} before .nav-collapse goes to {height: 0}. I'd look for that.

UPDATE: It's in the page styles:

  @media (max-width: 980px) {
    /* Enable use of floated navbar text */
    .navbar-text.pull-right {
      float: none;
      padding-left: 5px;
      padding-right: 5px;
    }
  }
Discussion courtesy of: isherwood

This recipe can be found in it's original form on Stack Over Flow.