css - 修改导航栏时，如何正确呈现下拉菜单？

Question

我正在使用 Bootstrap 创建我的用户界面。

我有一个相对较高的导航栏；导航栏的默认高度是 50px，我的导航栏是 100px。当我渲染一个拆分按钮时，菜单下拉菜单不考虑导航栏高度(下面的链接说明了这个问题)。我该如何解决这个问题，以便下拉菜单呈现在按钮下方(而不是导航栏下方)？

此外，如果有人对如何消除按钮组中间的空隙提出建议，那也太棒了!

---

澄清

我使用的是 SASS，所以我没有意识到我粘贴的链接没有说明问题。我编译了我的 CSS 并将其放在 JSFiddle 链接中。不幸的是，那里的 CSS 文件很大。

如果您将 BootStrap 与 LESS 或 SASS 一起使用，我将 $navbar-height 变量调整为 100px(而不是 50px)。

无论如何，我希望得到一些关于调整导航栏高度等内容的 Bootstrap Way™ 的指导，以便这些东西起作用。

(没有说明问题的旧链接) http://www.bootply.com/yOrqxaoM2t

(新链接) http://jsfiddle.net/marvery/VpL9N/1/

Answer 1

好的，看起来问题不在于 navba 高度，它与你在 .navbar-btn 上设置的 margin-bottom:33px 的边距有关 - 这需要被删除。

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

将下拉列表移动到比默认值低 33px fiddle link