Css 非折叠项twitter引导导航栏

当一个导航栏上有永久固定的项目（甚至在移动设备上）和其他崩溃的项目时，有没有使用twitter引导的最佳实践。当我尝试添加折叠间距以外的项目时，移动设备上的项目将被删除。我可以手动添加css规则，但我认为可能有一种内置的方法来处理这个问题。如蒙指教，不胜感激

移动设备（存在间距问题）：

HTML:

切换导航

---

总而言之，让导航栏项目不折叠且在移动显示器上间隔适当的最佳方式是什么？

因为你有图标链接，你可以将它们放在ul

导航栏导航列表内联

内

导航栏标题

中，如下所示

      <div class="navbar-text">   
              <ul class="navbar-nav list-inline">
              <li>
                <a href="#"><span id="timer" class="glyphicon glyphicon-time"></span></a>
              </li>
             ..
              <li>
                <a href="#"><span class="glyphicon glyphicon-forward"></span></a>
              </li>
              </ul>
      </div>

..

---

---

一般来说，要从折叠中排除菜单项，只需将它们保留在

导航栏折叠之外

我创建了一个更少的代码片段，使非折叠导航栏项即使在小屏幕上也成为可能：

.navbar {
    // use this class instead of .collapse .navbar-collapse for the div surrounding the navbar items that should not collapse
    .no-collapse {
        @media (max-width: @grid-float-breakpoint-max) {
            .navbar-nav {
                margin-top: -@navbar-height;
                margin-bottom: 0;
                &.navbar-right {
                    float: right;
                    // summed up width and padding of .navbar-toggle elements
                    padding-right: 2*@navbar-padding-horizontal + 19px + 22px;
                }
                & .open {
                    .dropdown-menu {
                        .dropdown-menu();
                        display: block;
                        margin-top: 0;
                        .border-top-radius(0);
                    }
                }
            }
            li {
                display: inline-block;
                float: left;
                > a {
                    padding-top:    @navbar-padding-vertical;
                    padding-bottom: @navbar-padding-vertical;
                }
            }
        }
    }
}

不过，为了能够使用mixin和变量，您必须在构建环境中包含无引导文件

一旦你有了它，你可以在导航栏中的折叠div旁边添加一个

div class=“no collapse”

：

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">

            <div class="no-collapse">
                <!--...-->
            </div>

            <div class="collapse navbar-collapse">
                <!--...-->
            </div>
        </div>
    </nav>

---

在该div中，您可以添加一个包含任何li元素和下拉列表的ul列表，就像您使用常规折叠的navbar元素一样。

将它们包装为链接是可以的，但是当我将其加载到移动设备上时，所有的glypicon都垂直排列，而不是保持水平。啊哈！添加列表内联可以很好地将事情安排到位。那么这个问题解决了吗？通过将此设置为可接受的答案来帮助他人。是的，但让他们多打开几个小时，看看是否碰巧会有更好的答案，这不会有什么坏处。这会在导航栏左侧的标题中添加图标，但其余链接位于右侧。有没有办法在右边添加不可折叠的链接？使用Bootstrap 3.2编译时不会出现这种情况

@grid float breakpoint max

未定义。

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">

            <div class="no-collapse">
                <!--...-->
            </div>

            <div class="collapse navbar-collapse">
                <!--...-->
            </div>
        </div>
    </nav>