Question

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

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

我正在使用像documentation州一样的<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>

我还尝试设置resize事件处理程序来删除“btn-group-justified”类并重新添加但无效。

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

任何建议都将受到赞赏。

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

Answer 1

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

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

我发现在重新添加类之前，即使只有1毫秒的延迟也足以使其正确调整大小。很奇怪。在Bootstrap repo here上打开了一个新问题。

Answer 2

<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;">

请保持相同的尺寸，提供多种尺寸可能会给您带来不必要的结果

Bootstrap页脚旋转问题

2 个答案: