如何获取引导导航栏内联或只是折叠它们？

Question

我正在尝试使用bootstrap来创建导航栏。导航栏的左侧是功能菜单。右侧是导航按钮，其中包含指向控制面板或注销页面的链接等。

导航栏如下图所示。

当我减小浏览器的大小时，它应该如下图所示。

但是，如果浏览器的大小适中，则导航栏将如下图所示。

也就是说，左侧导航栏和右侧导航栏不是内联的，而是堆积在一起。

我想知道如何使左右导航栏始终内联，或者只是折叠它们。

代码位于：https://jsbin.com/qeduwujadu/3/edit?html,output

我尝试按照此post来解决此问题，但失败了。

请帮忙吗？

Answer 1

我通常做的一种方法是我不让代码自己来决定何时应该切换，因为他们通常会这样做，因为我认为它是600px的屏幕。我使用visible-lg，visible-md，visible-sm和visible-xs类强制显示某些屏幕尺寸。

通过将其放入类名中，bootstrap将根据其所在的屏幕范围检测大小和显示。您可以通过添加visible-sm和{{{}来强制它在收缩时显示导航栏1}}。

亲：更具适应性。 Con：根据您应用该类的内容的大小来增加空间。