简体繁体 English

twitter-bootstrap导航栏太宽

[英]twitter-bootstrap too wide navbar

原文 2015-10-27 09:44:33 7 1 html/ css/ twitter-bootstrap

I'm working on a website and I'm using the bootstrap framework. 我正在网站上，并且正在使用bootstrap框架。
I have a navbar setup, pretty "original" but I have too many items on the navbar. 我有一个导航栏设置，非常“原始”，但是导航栏上有太多项目。 Therefor I have 2 lines of navbar-items. 因此，我有2行导航栏项目。
What I want is that the navbar sets as many items on 1 line and if there is not enough width to set them all that it show an dropdown with "more" and that the remaining items are under the "dropdown". 我想要的是导航栏在1行上设置了尽可能多的项目，并且如果没有足够的宽度来设置所有项目，那么它会显示带有“更多”的下拉列表，而其余项目位于“下拉列表”下。

1 个解决方案

First, I suggest if you really have so many items in a navigation, you probably need a vertical nav menu instead of horizontal navbar. 首先，我建议如果导航中确实有很多项目，则可能需要垂直导航菜单而不是水平导航栏。

Then, If you really want what you described, you can't do it with bootstrap out of box, you need write your own "dynamic" dropdown by yourself. 然后，如果您真的想要您所描述的内容，那么就不能使用现成的引导程序来做到这一点，您需要自己编写自己的“动态”下拉列表。

What you can do is listen to window.resize event, detect the responsive navbar width and calculate how many items in the tail should be put into a dropdown list. 您可以做的是监听window.resize事件，检测响应式导航栏的宽度，并计算应将尾部的多少项放入下拉列表中。 Then do that in javascript. 然后在javascript中进行操作。