html - Bootstrap 3 响应式菜单 - 导航栏间距问题

Question

我遇到了以下问题:

根据文档，Bootstrap 3 导航栏具有三个不同的分隔线，定义如下:http://getbootstrap.com/components/#navbar-default

• nav navbar-nav
• navbar-form navbar-left
• nav navbar-nav navbar-right

但是，我没有任何导航链接可以输入品牌旁边的 nav navbar-nav 部分；我只使用 navbar-form navbar-left 和 nav navbar-nav navbar-right 所以我决定完全删除 nav navbar-nav .

给我的问题是，当菜单折叠时，navbar 和 form 之间有一个奇怪的间距。实现我正在尝试做的事情和/或避免这个问题的正确方法是什么？

更新 如果我放下 nav navbar-nav navbar-right 我会遇到相同的间距问题，除了折叠菜单底部的底部。 Bootstrap 似乎希望有东西；有办法解决这个问题吗？

Update2 默认 Bootstrap 3 导航栏 http://jsfiddle.net/wmkp595e/

• 搜索表单 和导航栏 之间的间距问题 http://jsfiddle.net/wmkp595e/1/

Answer 1

如果您在媒体查询之前查看导航栏的 Bootstrap 3 css ( https://raw.githubusercontent.com/twbs/bootstrap/master/dist/css/bootstrap.css ) -- 这是小视口(viewport)菜单使用的那个，您会发现无论您放在哪里，边框都在那里你的表单，所以如果它就在 .navbar-header 之后，你将有双重规则和顶部的填充，你可能想删除也可能不想删除。

.navbar-form {
  padding: 10px 15px;
  margin-top: 8px;
  margin-right: -15px;
  margin-bottom: 8px;
  margin-left: -15px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}

如果你把你的表单放在它后面，写一些 css 来解决这个问题，因为你的 css 将在 Bootstrap CSS 之后，你将需要一个最大宽度，否则你的会搞砸填充:

@media (max-width:767px) {
   .navbar-form {
      border-top:0px;
      padding-top:0;
   }
}

演示:http://jsfiddle.net/wmkp595e/3