响应式中等尺寸屏幕（平板电脑）的引导问题

Question

我正在尝试实现 bootstrap 3 响应式设计，但由于某种原因，导航栏的视图在以中等尺寸屏幕显示时会中断。

以下分别是 3 个视口：移动设备、平板电脑和屏幕。

平板电脑坏了，手机/屏幕都很好。 我尝试了很多东西，但到目前为止还没有弄清楚。

如您所见，这是中断的（2 行而不是显示三个条形图标。

这个很好（PC）

谢谢！

Answer 1

根据官方文档（已添加重点）：

Overflowing content

由于 Bootstrap 不知道导航栏中的内容需要多少空间，您可能会遇到内容包装到第二行的问题。要解决此问题，您可以：

• 减少导航栏项目的数量或宽度。
• 使用responsive utility classes隐藏特定屏幕尺寸的特定导航栏项目。
• 更改导航栏在折叠模式和水平模式之间切换的点。自定义 @grid-float-breakpoint 变量或添加您自己的媒体查询。

Answer 2

您的右侧按钮栏上有足够的东西，太宽而无法在屏幕上显示，所以它会换行到下一行。

Bootstrap 不会在屏幕太窄而无法容纳项目时立即制作可折叠的“3 条”图标。它以特定的窗口宽度执行此操作。

可能的解决方案是缩小内容、删除一些项目，或在 Bootstrap 主题中重新定义媒体查询断点，以切换到具有不同屏幕宽度的折叠菜单的“移动”视图。

如果您想在本地重建主题或在项目中使用 .less，则可以在 Bootstrap 的 .less 文件中完成最后一项，重新定义断点。或者，您可以使用 online theme generator, and change the breakpoints here.

生成新主题

Answer 3

作为一种解决方法，只需使用购物车（您拥有的购物车）和帐户（cog 或人员）的图标即可解决换行问题。

之后您可以使用工具提示进行用户确认。