Question

我想在bootstrap中实现全宽度的大型菜单。这是菜单的标记：

<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是我为另一个答案创建的大型菜单，让您完全了解该做什么和不该做什么。

如何在bootstrap中制作全宽度的超级菜单

1 个答案: