Question

我有两个问题。

1-为什么此菜单上的下拉菜单不能在我的ipad上运行：www.dyhas.com/jonas

它在桌面上工作正常并在我的iphone中工作正常（在用切换按钮关闭后）但是当我点击我的ipad中的一个下拉时没有任何反应。此外，它是溢出到两行而不是创建一个切换按钮？

2-我在LESS文件中使用媒体查询。这些似乎没有正常工作，因为当我在平板电脑风景中它不适用它们。我在哪里查询错误？它似乎适用于某些东西但不适用于其他东西......例如，我希望导航栏菜单字体在平板电脑上的横向和纵向都可以转到12，但它只是在肖像上应用它。

    @screen-xsmall:              480px;
    @screen-phone:               @screen-xsmall;


    @screen-small:               768px;
    @screen-tablet:              @screen-small;


    @screen-medium:              992px;
    @screen-desktop:             @screen-medium;


    @screen-large:               1200px;
    @screen-large-desktop:       @screen-large;


    // large desktop
    @media (min-width:@screen-large-desktop) and (max-width: 2500px) {
         h1, .h1 { font-size: @font-size-h1; } // ~62px
        h2, .h2 { font-size: @font-size-h2; } // ~52px
        h3, .h3 { font-size: @font-size-h3; } // ~40px
        h4, .h4 { font-size: @font-size-h4; } // ~29px
        h5, .h5 { font-size: @font-size-h5; }   // ~28px 
        h6, .h6 { font-size: @font-size-h6; } // ~24px     
    }
    // medium desktop
    @media (min-width:@screen-tablet) and (max-width: @screen-desktop) {
        h1, .h1 { font-size: @font-size-h1; } // ~62px
        h2, .h2 { font-size: @font-size-h2; } // ~52px
        h3, .h3 { font-size: @font-size-h3; } // ~40px
        h4, .h4 { font-size: @font-size-h4; } // ~29px
        h5, .h5 { font-size: @font-size-h5; }   // ~28px 
        h6, .h6 { font-size: @font-size-h6; } // ~24px 

        .navbar-inverse .navbar-nav>li>a {
            font-size:12px;
        }
            .bannerButton a {
                width: 100px;
                padding:5px;
                margin:5px;
                font-size:12px;
        }
    }
    // smalls screens tablet& landscape phones
    // If screen is > than phone and < max tablet
    @media(min-width:@screen-phone) and (max-width: @screen-tablet) {
       h1, .h1 {font-size:@font-size-base + 12px;}
       h2, .h2 {font-size:@font-size-base + 9px;}
       h3, .h3 {font-size:@font-size-base + 6px;}
       h4, .h4, h5, .h5 {font-size:@font-size-base + 2px;} 
       .login-form {
           margin-left:8px;
           margin-right:8px;
       }
       .btn {
           margin-bottom:8px;
       }
       a > .configText {
            display:none;
       }
        .navbar-inverse .navbar-nav>li>a {
            font-size:12px;
        }
        .bannerButton a {
                width: 100px;
                padding:5px;
                margin:5px;
                font-size:12px;
        }

    }
    // xtra small screens. phones


       @media(max-width:@screen-phone) {
           body, p, blockquote {font-size:@font-size-base - 3px;}
           h1, .h1 {font-size:@font-size-base + 7px;}
           h2, .h2 {font-size:@font-size-base + 4px;}
           h3, .h3 {font-size:@font-size-base + 2px;}
           h4, .h4, h5, .h5 {font-size:@font-size-base;}   

            .navbar-inverse .navbar-nav>li>a {
                font-size:12px;
            }
                .bannerButton a {
                    width: 100px;
                    padding:5px;
                    margin:5px;
                    font-size:12px;
            }
        }

Answer 1

我想我想通了，我的媒体查询设置有很大差距，我想出了如何覆盖平板电脑导航栏的快照点。

Bootstrap 3导航栏和媒体查询问题

1 个答案: