Question

开始学习Bootstrap并遇到问题...我的导航栏切换因某些原因无效...
这是我的代码：

<nav>
        <div class="container">
            <div class="row">

                <div class="navbar-header">
                    <a href="#" class="navbar-brand logo">
                        <img src="img/logo.png" alt="Logo">
                    </a>

                    <button class="navbar-toggle collapsed menu_btn" data-toogle="collapse" data-target="#top_menu">
                        Menu
                    </button>
                </div>

                <div class="collapse navbar-collapse navbar-right" id="top_menu">
                    <ul class="menu">
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Works</a></li>
                        <li><a href="#">our team</a></li>
                        <li><a href="#">testimoials</a></li>
                        <li><a href="#">download</a></li>
                    </ul>
                </div>
            </div>
            <div class="top_line"></div>
        </div>
    </nav>

图书馆是正确的。

谢谢！

Answer 1

你有一个错字..

data-toogle="collapse"

应该是

data-toggle="collapse"

Answer 2

<div class="container">
   <div class="row">
     <nav class="navbar navbar-default">
       <div class="navbar-header">
           <a href="#" class="navbar-brand logo">
               <img src="img/logo.png" alt="Logo" />
           </a>
           <button class="navbar-toggle collapsed menu_btn" data-toggle="collapse" data-target="#top_menu">Menu</button>
       </div>
       <div class="collapse navbar-collapse navbar-right" id="top_menu">
         <ul class="nav navbar-nav" class="menu">
           <li><a href="#">Features</a></li>
           <li><a href="#">Works</a></li>
           <li><a href="#">our team</a></li>
           <li><a href="#">testimoials</a></li>
           <li><a href="#">download</a></li>
         </ul>
       </div>
     </nav>
   </div>
   <div class="top_line"></div>
</div>

Bootstrap导航栏崩溃无法正常工作

2 个答案: