Podczas modyfikowania paska nawigacyjnego, jak mogę prawidłowo renderować menu rozwijane? - css, menu rozwijane, twitter-bootstrap-3, navbar

Używam Bootstrap do tworzenia mojego interfejsu użytkownika.

Mam navbar, który jest stosunkowo wysoki;domyślna wysokość paska nawigacyjnego to 50 pikseli, a mój pasek nawigacyjny to 100 pikseli. Kiedy renderuję przycisk podziału, menu rozwijane nie respektuje wysokości paska nawigacyjnego (poniższy link ilustruje problem). Jak to naprawić, aby lista rozwijana wyświetlała się pod przyciskiem (a nie pod paskiem nawigacyjnym)?

Ponadto, jeśli ktoś ma sugestię, jak pozbyć się luki w środku grupy przycisków, to też byłoby niesamowite!

Wyjaśnienie

Używam SASS, więc nie zdałem sobie sprawy, że link, który wkleiłem, nie ilustruje problemu. Skompilowałem mój CSS i umieściłem go w łączu JSFiddle. Niestety, plik CSS jest ogromny.

Jeśli używasz BootStrap z LESS lub SASS, poprawiłem $navbar-height zmienna na 100px (zamiast 50px).

W każdym razie mam nadzieję na pewne wskazówki dotyczące sposobu, w jaki Bootstrap Way ™ reguluje takie rzeczy jak wysokość paska nawigacyjnego, więc to działa.

(Stary link, który nie ilustruje problemu) http://www.bootply.com/yOrqxaoM2t

(Nowy link) http://jsfiddle.net/marvery/VpL9N/1/

Odpowiedzi:

ok, wygląda na to, że problem nie dotyczy wysokości navba z marginesem, który ustawiłeś margin-bottom:33px na .navbar-btn- to musi zostać usunięte.

 .navbar-btn {
margin-bottom:0px;/* should be zero bootstrap default btn margin- remove yours */
}

to powoduje, że lista rozwijana jest o 33px niższa niż domyślna skrzypce połączyć