【问题标题】:Bootstrap menu fully shows when viewing in mobile.在移动设备中查看时,引导菜单完全显示。
【发布时间】:2017-07-06 17:09:31
【问题描述】:

提前非常感谢!我是一名平面设计师,使用 SIMA 引导模板。我没有成功联系到模板的作者。除了当您在移动设备上查看网站时,所有内容都是犹太教,导航菜单会完全显示。用户必须手动单击导航选项卡才能隐藏菜单(可用性差)。我搜索了类似的问题,发现我有正确的元视图标签,我的导航类和 id 似乎都在那里。我的网站的链接是www.thesunkenweb.com/loteksystems 作者网站的链接(具有相同的结果)是https://readytheme.net/item/sima-one-page-multipage-template/ HTML 片段:

    <!-- Start Header Section -->
    <header class="main_menu_sec navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-12">
                    <div class="lft_hd">
                        <a href="index.html"><img src="http://www.thesunkenweb.com/loteksystems/img/LotekSystemsLogo_1.png" alt="Lotek Systems"/></a>
                </div>
            </div>          
            <div class="col-lg-9 col-md-9 col-sm-12">
                <div class="rgt_hd">                    
                    <div class="main_menu">
                        <nav id="nav_menu">
                            <button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            </button>   
                        <div id="navbar">
                            <ul>
                                <li><a class="page-scroll" href="index.html">Home</a></li> 
                                <li><a class="page-scroll" href="#abt_sec">About Us<i class="fa fa-angle-down"></i></a>
                                    <ul>
                                        <li><a class="page-scroll" href="#tm_sec">Meet Andy</a></li>
                                        <li><a class="page-scroll" href="#tstm_sec">Testimonials</a></li>
                                        <li><a class="page-scroll" href="#clt_sec">Experience</a></li>
                                    </ul>
                                </li>                       
                                <li><a class="page-scroll" href="#pr_sec">Services<i class="fa fa-angle-down"></i></a>
                                    <ul>
                                        <li><a class="page-scroll" href="CustomCloudManagement.html">Custom Managed Cloud Hosting</a></li>
                                        <li><a class="page-scroll" href="CloudMigration.html">Cloud Migration</a></li>
                                        <li><a class="page-scroll" href="ApplicationManagement.html">Application Management</a></li>
                                        <li><a class="page-scroll" href="ComputerRepairs.html">Computer Repairs</a></li>
                                    </ul>
                                </li>
                                <li><a class="page-scroll" href="#ctn_sec">Contact Us</a></li>
                            </ul>
                        </div>      
                        </nav>          
                    </div>                          
                </div>
            </div>  
        </div>  
    </div>  
</header>
<!-- End Header Section -->

【问题讨论】:

    标签: jquery html css twitter-bootstrap mobile


    【解决方案1】:
    @media (max-width:767px){
      #navbar{display:none}
    }
    

    添加这个,一切都会是犹太洁食☺

    【讨论】:

    • 非常感谢!!这很有意义。感谢您帮助我们的设计师!干杯! – 唐
    • 试图给你一个 up,但由于我是 Stack 的新手,我还没有放弃一个 up。我会尽快的!
    猜你喜欢
    • 2015-03-30
    • 1970-01-01
    • 2018-09-29
    • 1970-01-01
    • 1970-01-01
    • 2018-09-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多