Twitter Bootstrap: 导航栏在方向改变时未调整大小（仅适用于Android的原生浏览器）

Question

Twitter Bootstrap: 导航栏在方向改变时未调整大小（仅适用于Android的原生浏览器）

androidjqueryhtmltwitter-bootstrapmobile

5

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

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

我希望移动设备上的方向更改事件能触发导航栏的“调整大小”(在桌面上的调整大小事件会正确地触发导航栏的调整大小)。在导航栏的右侧，我有一个可折叠的navbar-toggle，它打开/关闭主菜单：从横屏到竖屏方向更改时，菜单按钮不再可见，这是一场灾难... 这个问题也可以在官方的navbar-fixed-top示例中进行验证(位于http://getbootstrap.com/examples/navbar-fixed-top/)。我正在使用三星Galaxy S3和Android 4.1.2上的股票(默认)浏览器。iPhone(3)浏览器上没有出现这个问题。更新: Android 4.3仍然存在此问题。

- MarcoS

1

我只能猜测这个问题只出现在Android上，因为到目前为止，我只测试了一个Android设备和一个iPhone设备... - MarcoS

在同一台Android设备上安装了Google Chrome，该问题就不会发生。 - MarcoS

适用于三星S4上安卓4.2.2版本的原生浏览器。 - mccannf

在LG LG-P760设备上的Android 4.1.2股票浏览器上运行。看起来像是Galaxy-S3股票浏览器的问题... - MarcoS

在 Android 问题跟踪器页面上提交了一个问题。 - MarcoS

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user3627194 · Answer 1

不确定你的意思。但是编写自己的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。希望我帮到你了。再次提问并更具体地描述你的问题。