响应式中型屏幕（平板电脑）的Bootstrap问题

Question

我正在尝试实现bootstrap 3响应式设计，但出于某种原因，当使用中等大小的屏幕显示时，导航栏的视图会中断。

以下是3个视口：手机，平板电脑和屏幕。

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

正如你所看到的，这是一个断裂的（2行而不是显示三个小节图标。

这个很好（PC）

谢谢！

Answer 1

根据官方文件（重点补充）：

  

Overflowing content

     

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

     

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

Answer 2

右侧按钮栏上有足够的东西太宽而无法放在屏幕上，因此它会换行到下一行。

一旦屏幕太窄而无法容纳项目，

引导不制作可折叠的“3条”图标。它在特定窗口宽度下执行此操作。

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

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

生成新主题

Answer 3

作为一种解决方法，只需使用购物车（您拥有的购物车）和帐户（cog或person）的图标，这应该会破坏换行问题。

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