我已经为我的网站使用 twitter bootstrap 实现了响应式设计。可折叠的导航栏在手机上运行良好,但在平板电脑和 iPad 上却不行。基本上我希望可折叠导航自动在平板电脑或 ipad 上实现。我发现引导文档有点混乱。任何人都可以提供一些指导。
问问题
696 次
1 回答
3
Bootstrap 不适用于设备,它使用屏幕宽度(通过 CSS 媒体查询)以特定宽度折叠导航栏。因此,在 iPad 上默认启用它的唯一方法是确保它折叠在 iPad 的屏幕宽度或以上(纵向模式下为 768px)。
我过去也做过同样的事情,并且有几次最终编辑了@media
构成其中一部分的查询,以bootstrap-responsive.css
使其以更合适的宽度折叠到平板电脑上。例如:
@media (min-width: 768px) and (max-width: 979px) {
如此处详述,一种更先进的方法是自定义引导程序以满足您的需求并使用自定义变量 - 更改@navbarCollapseWidth
页面上列出的变量,但您可能更喜欢手动编辑宽度...
附带说明一下,可能值得查看各种流行平板电脑和设备的屏幕宽度。这可能会有所帮助:媒体查询:如何定位台式机、平板电脑和移动设备?
于 2013-03-28T21:49:47.363 回答