移动友好导航栏（无崩溃）

Question

我一直在努力创建一个不会崩溃的移动友好导航栏。

默认情况下，当屏幕缩小为＆lt;时，导航栏会折叠。宽度为768像素。

我知道这可以通过直接修改bootstrap来完成。 我想避免这样做，而是使用覆盖。

我停止使用navbar-header并应用以下css来停止崩溃。

/* stop navbar from collapsing */
.navbar-collapse.collapse {
  display: block;
}

.navbar-nav>li, .navbar-nav {
  float: left;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px;
}

.navbar-right {
  float: right;
}

我拥有它，所以它不会崩溃。但是，当屏幕是＆lt; 768宽度，导航栏的高度增加，它包含的品牌，文字，按钮等略有移动。

屏幕宽度= 768的屏幕截图

屏幕宽度＆lt;屏幕截图的屏幕截图768

我在这里创建了一个jsbin http://jsbin.com/vojiqi/edit?html,css,output

有谁知道为什么会这样，以及如何阻止它？

我只想要一个适应屏幕尺寸且不会崩溃的导航栏。

解决方案
使用bootstrap的导航栏：http://jsbin.com/nemipu/edit?html,css,output
不使用bootstrap的导航栏：http://jsbin.com/pediga/edit?html,css,output

使用bootstrap的导航栏（无导航栏崩溃） http://jsbin.com/posuvu/edit?html,css,output

Answer 1

你也有在这个断点处来来往往的边界，但这解决了大部分问题：

.navbar-nav {
    margin: 0 -15px;
}

<强> Demo

Answer 2

只需将此添加到您的代码中，bootstrap在这种情况下具有默认边距

.navbar-nav {
    margin: auto;
}

Answer 3

除@isherwood答案外，将border-top: 0;添加到'navbar-collapse.collapse'类。

修改 假设您想利用Bootstrap导航栏功能，您可以将下面的媒体查询添加到CSS中，以便在视口更改超过断点时停止品牌“跳跃”。

@media only screen and (min-width : 320px) {

  .navbar > .container .navbar-brand, 
  .navbar > .container-fluid .navbar-brand {
      margin-left: -15px;
  }

  .navbar-nav>li>a {
    padding-top:15px;
    padding-bottom:15px;
  }

  .navbar-text {
    float: left;
  }

}

但是，我认为你可能想在品牌和视口边缘之间留一些空间。