Question

所以基本上，我试图使用jQuery为我的导航栏（Bootstrap导航栏）提供100％的宽度，但是以像素为单位。

当然，每次调整浏览器/窗口大小时都必须确定这一点。

我想出了这个，虽然这是非常错误的。它使用＆＃39; nav＆＃39;的起始宽度。 as＆＃39; navsize＆＃39;，在调整窗口大小时，navsize仍然保持不变。

$(document).on('ready', function () {
    $(window).on('resize', function () {
        var navsize = $('nav').width();
        $('nav').css('width', navsize);
    }).trigger('resize');
});

我也试过var navsize = $('nav').innerWidth();，这也不好。

由于我使用console.log()

进行了测试，因此在调整大小时肯定会调用该函数

对于那些想知道我为什么这样做的人，我使用StickyJS来使我的导航滚动页面。虽然，因为它使用100%宽度，所以在滚动时它变得小得多，因为nav离开了它的容器。

Answer 1

这应该有效

    $(document).on('ready', function () {
    $(window).on('resize', function () {
        $('nav').css('width', 'calc(100% + 1px  - 1px)' );
        console.log( $('nav').width() );

        ///  Use following ONLY if you specifically want to set the width in pixel
        $('nav').width($('nav').width());
    }).trigger('resize');
});

console.log的宽度以像素为单位。意味着将来你会读取宽度，它将以像素为单位。

calc(100% + 1px - 1px)转换宽度并以px单位设置，我们稍后可以阅读。

Answer 2

你确定$（'nav'）存在吗？

我已经使用基本的引导程序页面进行了一些测试，稍微更改了代码。

导航到此页面并打开控制台检查器。

http://getbootstrap.com/examples/starter-template/

粘贴以下代码，您将看到.navbar宽度将记录在窗口调整大小上。

$(window).on('resize', function () {
    var navsize = $('.navbar').width();
    console.log(navsize)
});

干杯。

Answer 3

使用支持HTML和CSS会更容易，但我会冒险根据行为进行猜测。

最好的猜测 这听起来像是其中一种选择。

您打算使用＃nav，.nav，div.nav等，并且实际上并不意味着选择＆＃34; nav＆＃34;元件
你的＆＃34; nav＆＃34;元素不显示inline-block | block，在某些浏览器中出现
你正在使用＆＃34; nav＆＃34;在不支持它的浏览器中标记（IE 8）
你的JS库并不支持＆＃34; nav＆＃34;标签

<强>替代使用JS将导航重新定位到正文（在适当的滚动深度）并为您的html，body和nav标签提供100％的宽度

希望有所帮助。

如何在调整大小时提供导航100％宽度的像素？

3 个答案: