Twitter Bootstrap：导航栏未在方向更改时调整大小（仅适用于 Android 的股票浏览器）

Posted 2023-03-31

【中文标题】Twitter Bootstrap：导航栏未在方向更改时调整大小（仅适用于 Android 的股票浏览器）

【英文标题】：Twitter Bootstrap: navbar not resized on orientation change (only with Android's stock browser)

【发布时间】：2013-09-25 14:36:42

【问题描述】：

我的 Twitter Bootstrap 移动页面有一个固定顶部的导航栏

<div class="navbar navbar-fixed-top">

我希望方向更改事件会在移动设备上触发导航栏的“调整大小”（桌面上的调整大小事件确实会正确触发导航栏的调整大小）。在导航栏的右侧，我有一个可折叠的导航栏切换开关，它可以打开/关闭主菜单：当将方向从横向更改为纵向时，菜单按钮不再可见，这是一场灾难......

也可以通过官方的 navbar-fixed-top 示例（http://getbootstrap.com/examples/navbar-fixed-top/）验证该问题。

我在装有 android 4.1.2 的三星 Galaxy S3 上使用普通（默认）浏览器。

iPhone (3) 浏览器不会出现此问题。

更新： 该问题在 Android 4.3 中仍然存在。

【问题讨论】：

我只能假设问题只发生在 Android 上，因为到目前为止我只测试了 one Android 设备和 one iPhone 设备。 .

在同一台 Android 设备上安装 Google Chrome 时，问题不会发生。

适用于三星 S4 上 Android 4.2.2 的股票浏览器。

适用于 LG LG-P760 设备上 Android 4.1.2 的股票浏览器。看起来像是 Galaxy-S3 库存浏览器问题...

在 Android 问题跟踪页面上提交了一个问题...

【参考方案1】：

不确定你的意思。但是用你所有的 Size 东西编写你自己的 CSS 并在它之后和之前添加 !important ; 像这样的：

.navbar-whatever 
whateverSizeCode = 0 !important;
whateverSizeCode2 = 0 !important;

为 Twitter Bootstrap 放置移动标签。这是给你的链接：http://getbootstrap.com/css/#overview-mobile

为您提供移动代码。将此添加到您的标签中

<!-- Scroll Enabled --> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Scroll Disabled -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

注意：使用这两行中的任何一行。

还要确保在您的 html 中这样做：

<style rel="stylesheet" link="bootstrap.css">
<style rel="stylesheet" link="yourCSS.css">

这样做的目的是将您的样式和大小设置为首先由代码读取 Bootstrap，然后是您的 CSS，这样它就不会覆盖您的 CSS。 希望我有帮助。再问我一次，说得更具体些。

【讨论】：

你怎么不明白我的意思？只需将引用的官方导航栏固定顶部示例（getbootstrap.com/examples/navbar-fixed-top）加载到 - 例如 - 带有 Android 4.0.4 的三星 Galaxy S3（我没有完整的设备/操作系统统计信息，抱歉......）。然后将您的设备旋转 90°，看看导航栏会发生什么……我不想通过一些 css 技巧来绕过这个错误，我只想发布这个问题以让人们知道和修复……

@MarcoS bro 如果你想发布这个问题然后告诉 Twitter。 Stack Over Flow 的解决方案。如你所愿。我只是试着给出一个解决方案。