Glitchy поведение в twitter-bootstrap отзывчивое меню

Question

Я пытаюсь получить строку меню примера на веб-сайте tb, чтобы быть постоянной высотой повсюду, и я столкнулся с немного странным поведением.

В следующем демо:

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

Если размер вашего браузера до 1070/1080 ширины рх, бар переходит к безобразной высоте, а затем обратно вниз. Это как будто есть медиа-запрос где-то в отзывчивом css, который не учитывал диапазон ~ 2px в ширине браузера. Я использую это как базовый уровень для своего приложения и абсолютно ценю любые предложения о том, как получить это исправление.

Answer 1

вопрос исходит от какого-то страницы определенного стиля (от fluid.html):

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

против какого-либо внешнего CSS (от начальной загрузки-отзывчивой .css):

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

Как вы можете видеть, разница между этими медиа-запросами составляет 1px. Если бы вы отредактировали первый, чтобы использовать 979px, все больше не прыгало бы.

Answer 2

Там есть место, где .navbar-text.pull-right идет до {float: none} до .nav-collapse идет до {height: 0}. Я бы посмотрел на это.

UPDATE: Это в стилях страницы:

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