Question

我正在使用bootstrap并尝试在浏览器缩放时使导航栏崩溃。导航栏在缩放时显示但无法显示内容！这里出了什么问题？如何启用导航栏折叠并显示其内容？

 <div class="navbar navbar-inverse navbar-fixed-top" style="height:70px"> <%--change header div size--%>
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" style="background-color:black" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
               <img src="/pic/photoHeader.jpg" height="60" />
            </div>

            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a runat="server" href="~/">Home</a></li>
                    <li><a runat="server" href="~/About">About Company</a></li>
                    <li id="businessU">
                        <a href="#">Business Units  </a>
                        <ul class="sub-menu">
                            <li><a runat="server" href="~/BusinessUnits/Engineering">Solution Engineering Sdn Bhd</a></li>
                            <li><a runat="server" href="~/BusinessUnits/Bioforce">Solution Bioforce Sdn Bhd </a></li>
                            <li><a runat="server" href="~/BusinessUnits/Biogen">Solution Biogen Sdn Bhd</a></li>
                            <li><a runat="server" href="~/BusinessUnits/AC">Solution A&C Technology Sdn Bhd</a></li>

                        </ul>
                    </li>
                    <li id="Investor">
                        <a href="#">Investor Relations</a>
                        <ul class="sub-menu2">
                            <li><a runat="server" href="~/InvestorRelation/Directors">Directors</a></li>
                            <li><a runat="server" href="~/InvestorRelation/CorporateStructure">Corporate Structure </a></li>
                            <li><a runat="server" href="~/InvestorRelation/News">News</a></li>
                            <li><a runat="server" href="~/InvestorRelation/Events">Events</a></li>
                            <li><a runat="server" href="~/InvestorRelation/Anno">Announcements</a></li>

                        </ul>
                    </li>
                    <li id="contact">
                        <a runat="server" href="#">Contact Us</a>
                        <ul class="sub-menu3">
                          <li><a runat="server" href="~/Contact/Contact">Contact</a></li>
                            <li><a runat="server" href="~/Contact/Whist">Whistleblowing</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><asp:LinkButton ID="login1" runat="server" PostBackUrl="~/Login.aspx">Admin Login</asp:LinkButton> </li>
                    <li> <asp:LinkButton ID="Logout" runat="server" CausesValidation="False" onclick="Logout_Click" style="text-align: right">(logout)</asp:LinkButton></li>

               </ul>
            </div>
        </div>
    </div>

Answer 1

我会快速猜测：你忘了包含jquery和bootstrap javascript库。

确保包含这两个脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Answer 2

要确保正确渲染和触摸缩放，请将viewport元标记添加到：

<meta name="viewport" content="width=device-width, initial-scale=1">

Reference

缩放时导航栏不会折叠

2 个答案: