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像素时，导航仅分离。缩放器不会足够快地缩小文本以使导航保持在一行上。

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

1 个答案: