Html 导航栏按钮左对齐，并以较小的分辨率堆叠

我的导航栏有点问题。它在上崩溃这里有一些解决这个问题的方法

1） 减小字体大小

2） 利用下拉菜单

3） 为频繁/常见链接添加另一个（永久暴露）条

参见工作示例

.navbar.navbar-custom，
.navbar.navbar-custom2，
.navbar.navbar-custom3{
背景：白色；
边界半径：0；
边界：无；
底部边框：3倍纯红；
}
/**导航一号**/
.navbar.navbar-custom.navbar-nav>li>a{
字体大小：12px；
}
/**导航三**/
.navbar-default.nav-top{
背景：白色；
边框顶部：3件纯红；
}
.navbar-default.nav-top ul{
显示：内联块；
浮动：对；
}
.navbar默认值.navbar顶部li{
浮动：左；
字体大小：12px；
}
.navbar默认值.navbar顶部li a{
颜色：#555；
}

切换导航

















导航1+较小的文本
切换导航





















导航2+下拉菜单






切换导航













导航三个以上链接

是否会像将@media查询更改为800-900左右那样简单？然后将其改为下拉菜单，如VunBurnx建议的？

尝试小屏幕到边距和填充减少。其他选项要考虑的是将一些链接安排到下拉菜单中，可以减少字体大小（可能不理想，但可以工作），或者在主Navar之上或下方建立另一组链接。