0

我正在使用带有 Bootstrap 和 PhoneGap Build 的 HTML/CSS/JS 创建一个移动应用程序。

在我的应用程序中，我的页面上有一个带有 3 个导航按钮的页脚。问题是，当我将设备从纵向旋转到横向时，按钮不会像预期的那样调整大小以占据整个宽度。但是，如果我在旋转后单击其中一个导航按钮，则加载的新页面会以全宽显示按钮。再次旋转回纵向，现在按钮占用了太多空间。

我正在使用<div class="btn-group btn-group-justified">文档状态。

我的页脚 HTML 如下：

<nav id="footer" class="navbar-fixed-bottom col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4" role="navigation" style="padding: 0 0;">
    <div id="footerGroup" class="btn-group btn-group-justified">
        <a type="button" class="btn btn-default active" href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
        <a type="button" class="btn btn-default" href="fundHistoryPage.html"><span class="glyphicon glyphicon-align-justify"></span> History</a>
        <a type="button" class="btn btn-default" href="calculatorPage.html"><span class="glyphicon glyphicon-usd"></span> Calc</a>
    </div>
</nav>

我还尝试设置一个调整大小事件处理程序以删除“btn-group-justified”类并重新添加它但无济于事。

$( window ).resize(function(){
    $("#footerGroup").removeClass('btn-group-justified');
    $("#footerGroup").addClass('btn-group-justified');
});

任何意见，将不胜感激。

编辑：在浏览器中测试时，页脚会完美地调整大小。只是不在测试设备上。

4

2 回答 2

1

我讨厌回答我自己的问题，但无论如何我都会回答。昨晚玩了一下之后，我最终采用了以下方法：

$( window ).resize(function(){
    $("#footerGroup").removeClass('btn-group-justified');
    setTimeout(function(){
        $("#footerGroup").addClass('btn-group-justified');
    }, 1);
});

我发现即使在重新添加类之前延迟 1 毫秒也足以让它正确调整大小。很奇怪。在此处的 Bootstrap 存储库上打开了一个新问题。

于 2013-10-08T11:08:16.810 回答
0 
<nav id="footer" class="navbar-fixed-bottom col-sm-12 col-sm-8 col-sm-offset-2 col-sm-6 col-sm-offset-3 col-sm-4 col-sm-offset-4" role="navigation" style="padding: 0 0;">

please maintain same sizes, providing multiple sizes may give you unwanted results

于 2015-04-21T07:29:39.567 回答