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 Navbar http://jsfiddle.net/wmkp595e/

search form和navbar http://jsfiddle.net/wmkp595e/1/

Answer 1

如果你在媒体查询之前查看导航栏的Bootstrap 3 css（https://raw.githubusercontent.com/twbs/bootstrap/master/dist/css/bootstrap.css） - 这是小视口菜单使用的那个，你会看到边框没有无论你把表单放在哪里，所以如果它在.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;
   }
}

DEMO：http://jsfiddle.net/wmkp595e/3

Answer 2

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

是设置元素定位的实用程序类，

你可以做一个小提琴或显示网站吗？

Answer 3

这是Bootstrap的默认行为。如果顶部导航中的内容太多，则当浏览器窗口大小较小时，将导致标题中的元素换行。有几种方法可以解决它：

您可以通过减少填充或使导航链接使用较少的文本或调整输入元素的大小来减少导航中使用的空间量。这可能是最简单的选择。
或者，您可以在引导程序中编辑@media CSS，以便更快地激活navbar-toggle按钮。

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

3 个答案: