javascript - 为什么我的主导航显示在两行而不是移动设备上的一行？

Question

网站:http://www.zrrdigitalmedia.com

我的主导航菜单在移动设备上显示为两行，而不是一行。我使用的是最新版本的 Bootstrap 2。

这是 HTML:

<div class="row-fluid" id="navRow">
            <div class="span12 text-center">
                <nav class="container-fluid" name="nav">
                    <ul class="nav nav-pills center-pills">
                        <li>
                            <a name="sites" href="#">SITES</a>
                        </li>
                        <li>
                            <a name="logos" href="#">LOGOS</a>
                        </li>
                        <li>
                            <a name="ads" href="#">ADS</a>
                        </li>
                        <li>
                            <a name="prints" href="#">PRINTS</a>
                        </li>
                        <li>
                            <a name="about" href="#">ABOUT</a>
                        </li>
                        <li>
                            <a href="mailto:zrubinrattet@gmail.com">CONTACT</a>
                        </li>
                    </ul>
                </nav>
            </div> 
        </div>

这是 CSS:

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    h1{
        font-size: 40px;
    }
    h3{
        font-size: 14px;
        line-height: 20px;
    }
    .headerText{
        font-size: 40px;
    }
    #headerBG{
        padding: 0px;
    }
    #navRow{
        top: 50px;
        height: 30px;
    }
    #topFiller{
        height: 100px;
    }
    .nav-pills > li > a,
    .nav-pills > li > a:focus {
        font-size: 30px;
        padding: 5%;
    }
}

/* Landscape phones and down */
@media (max-width: 480px) { 
    h1{
        font-size: 30px;
        padding-bottom: 0px;
    }
    h3{
        font-size: 12px;
        line-height: 15px;
    }
    .thumbnail p {
        font-size: 10px;
        line-height: 12px;
    }
    .headerText{
        font-size: 24px;
    }
    #headerBG{
        padding: 0px;
        height:40px;
    }
    #navRow{
        top: 40px;
        height: 25px;
    }
    #topFiller{
        height: 70px;
    }
    .nav{
        margin: 0;
    }
    .nav-pills > li > a,
    .nav-pills > li > a:focus {
        font-size: 17px;
        padding: 5%;
    }
}

这是 JS:

$(document).ready(function(){
    resizeStuff();
    $(window).on('resize',resizeStuff);

    function resizeStuff(){
        if($(window).width()<=600 && $(window).width()>0){
            $('#leftFiller').removeClass('span3');
            $('#leftFiller').addClass('span1');
            $('#rightFiller').removeClass('span3');
            $('#leftFiller').addClass('span1');
            $('#content').removeClass('span6');
            $('#content').addClass('span10');
        }
        else{
            $('#leftFiller').removeClass('span1');
            $('#leftFiller').addClass('span2');
            $('#rightFiller').removeClass('span1');
            $('#leftFiller').addClass('span2');
            $('#content').removeClass('span10');
            $('#content').addClass('span8');
        }
});

我需要确保主导航显示在一行而不是两行。当我将手机从横向旋转到纵向再到横向，或从纵向旋转到横向再到纵向时，主导航会按应有的方式调整大小。但是我需要在网站加载时发生这种情况。我不知道为什么会这样。有人可以提供帮助吗？谢谢。

Answer 1

只有当屏幕小于 239 像素时，导航才会分开。缩放器收缩文本的速度不够快，无法让导航保持在一行上。