Как сделать полноразмерное мега-меню в bootstrap

Question

Я хочу реализовать мегабайтное меню полной ширины в бутстрапе. здесь есть разметка для меню:

<nav class="navbar navbar-inverse navbar-static-top"> 
    <div class="container-fluid"> 
     <div class="navbar-header"><a class="navbar-brand" href="#"><b>eTouch</b></a></div> 
     <div> 
      <ul class="nav navbar-nav"> 
       <li><a data-toggle="tab" href="#" class="btn"> <span class="glyphicon glyphicon-home"></span> </a> 
        <ul class="dropdown-menu mega-dropdown-menu row"> 
         <div class="megamenu-headline"><h2>ODC VEGETABLES STORE</h2></div> 
         <li class="divider"></li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Dresses</li> 
           <li><a href="#">Unique Features</a></li> 
           <li><a href="#">Image Responsive</a></li> 
           <li><a href="#">Auto Carousel</a></li> 
           <li><a href="#">Newsletter Form</a></li> 
           <li><a href="#">Four columns</a></li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Tops</li> 
           <li><a href="#">Good Typography</a></li> 
          </ul> 
         </li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Dresses</li> 
           <li><a href="#">Unique Features</a></li> 
           <li><a href="#">Image Responsive</a></li> 
           <li><a href="#">Auto Carousel</a></li> 
           <li><a href="#">Newsletter Form</a></li> 
           <li><a href="#">Four columns</a></li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Tops</li> 
           <li><a href="#">Good Typography</a></li> 
          </ul> 
         </li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Jackets</li> 
           <li><a href="#">Easy to customize</a></li> 
           <li><a href="#">Glyphicons</a></li> 
           <li><a href="#">Pull Right Elements</a></li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Pants</li> 
           <li><a href="#">Coloured Headers</a></li> 
           <li><a href="#">Primary Buttons & Default</a></li> 
           <li><a href="#">Calls to action</a></li> 
          </ul> 
         </li> 
         <li class="col-sm-3"> 
          <ul> 
           <li class="dropdown-header">Accessories</li> 
           <li><a href="#">Default Navbar</a></li> 
           <li><a href="#">Lovely Fonts</a></li> 
           <li><a href="#">Responsive Dropdown </a></li> 
           <li class="divider"></li> 
           <li class="dropdown-header">Newsletter</li> 
           <form class="form" role="form"> 
            <div class="form-group"><label class="sr-only" for="email">Email address</label> 
             <input type="email" class="form-control" id="email" placeholder="Enter email"> 
            </div> 
            <button type="submit" class="btn btn-primary btn-block">Sign in</button> 
           </form> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li><a href="#" class="btn"> <span class="glyphicon glyphicon-user"></span> About </a></li> 
       <li><a href="#" class="btn"> <span class="glyphicon glyphicon-wrench"></span> Services </a></li> 
       <li><a href="#" class="btn"> <span class="glyphicon glyphicon-ok"></span> Solutions </a></li> 
       <li><a href="#" class="btn"> <span class="glyphicon glyphicon-briefcase"></span> Products </a></li> 
       <li><a href="#" class="btn"> <span class="glyphicon glyphicon-list"></span> Skills </a></li> 
       <!-- <li>    <a href="#" class="btn">   <span class="glyphicon glyphicon-cog"></span> Industries   </a>   </li>--> 
       <li><a href="#" class="btn"> <span class="glyphicon glyphicon-picture"></span> Portfolio </a></li> 
       <li><a href="#" class="btn"> <span class="glyphicon glyphicon-pencil"></span> Blog </a></li> 
       <li><a href="#" class="btn"> <span class="glyphicon glyphicon-comment"></span> Contacts </a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

сейчас я хочу, чтобы все мегабайты в мегабайтах менялись на каждом элементе. как дома, о, услуги и т.д.

Answer 1

Вы делаете неправильно здесь data-toggle="tab"

<li><a data-toggle="tab" href="#" class="btn"> <span class="glyphicon glyphicon-home"></span> </a> 

Должно быть data-toggle="dropdown"

<li><a data-toggle="dropdown" href="#" class="btn"> <span class="glyphicon glyphicon-home"></span> </a> 

Fiddle

Также Here мега меню я создал для другого ответа , дает вам полное представление о том, что делать и что не делать.