引導3響應的大型菜單

Question

我已經嘗試了很多，但我解決不了這個問題，

問題，菜單不能顯示響應。

我嘗試響應菜單這樣Demo

，並希望像這樣

HTML

<div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li id="fat-menu" class="dropdown pink"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Services </a> 
      <ul class="dropdown-menu"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       <li role="presentation" class="divider"></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
      </li> 
      <li id="fat-menu" class="dropdown rama"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Products </a> 
      <div class="dropdown-menu" style="left:-250px !important; width:800px; " role="menu" aria-labelledby="drop3"> 
       <div class="nav-product" role="main"> 
       <div class="col-lg-4"> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4 class="pink">Labour Manage. System</h4> 
         <p>There Managing Contractor's Labours/Workers at the entry points with rich GUI... <a href="#">Read More</a></p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/crm-nav-icon.png" alt="eXiger CRM System" class="pull-left"/> 
        <div class="media-body"> 
         <h4 class="rama" >eXiger CRM System</h4> 
         <p>awidely implemented strategy for managing a company's interactions with customers....<a href="#">Read More</a></p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/payroll-nav-icon.png" alt="Payroll Management" class="pull-left"/> 
        <div class="media-body"> 
         <h4 class="blue">Payroll Management</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
       </div> 
       <div class="col-lg-4"> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
       </div> 
       <div class="col-lg-4 "> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
        <div class="media"> <img src="img/lms-nav-icon.png" alt="Labour Management System" class="pull-left"/> 
        <div class="media-body"> 
         <h4>Subheading</h4> 
         <p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> 
        </div> 
        </div> 
       </div> 
       </div> 
      </div> 
      </li> 
      <li id="fat-menu" class="dropdown green"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Technology </a> 
      <ul class="dropdown-menu"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       <li role="presentation" class="divider"></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
      </li> 
      <li id="fat-menu" class="dropdown purple"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">Marketing </a> 
      <ul class="dropdown-menu"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       <li role="presentation" class="divider"></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
      </li> 
      <li id="fat-menu" class="dropdown orange"> <a href="#" id="drop3" role="button" class="dropdown-toggle " data-toggle="dropdown">About Us </a> 
      <ul class="dropdown-menu"> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> 
       <li role="presentation" class="divider"></li> 
       <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> 
      </ul> 
      </li> 
      <li class="pinkdark"><a href="#" >Request a Quote</a></li> 
     </ul> 
     </div> 

Answer 1

如果不早了，我做了這個megamenu自舉3 http://geedmo.github.io/yamm3/ ，也許它可以幫助你理解這個想法。