引导页脚旋转问题

Posted 2023-03-07

【中文标题】引导页脚旋转问题

【英文标题】：Bootstrap footer rotate issue

【发布时间】：2013-10-06 22:52:59

【问题描述】：

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

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

我正在使用<div class="btn-group btn-group-justified">，就像documentation 状态一样。

我的页脚 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');
);

任何建议将不胜感激。

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

【问题讨论】：

不确定您需要什么，但在这里可以正常工作。 bootply.com/85933 可以提供页面链接供我们在移动/标签设备中测试吗？很难知道拖动浏览器大小的问题。

是的，抱歉，忘了说它在浏览器中可以正常工作，只是在设备本身上不行。编辑了我的问题以反映这一点。

通常，当我更改网站的方向时，我必须双击才能在移动设备上正确调整大小。它不是自动化的，如果您改变方向，空间将保持不变。查看您的代码，问题可能来自不同的 COL 值（有些等于 12，其他等于 10，1 到 9，这可能会使您的引导程序的大小调整复杂化，具体取决于您的媒体查询）。

【参考方案1】：

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

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

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

【参考方案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;">

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