無法將菜單放入Bootstrap 3中的容器中

Question

以下是顯示垂直菜單欄的代碼，當我運行代碼時， dropdown菜單從引導container出來。

有人可以幫忙，如何將div放在容器中。

菜單應僅放置在container ，但在我的情況下， <div class="container">不會展開。

 .mega-dropdown { border: 2px solid #e0e0e0; position: relative; } .mega-dropdown.active:before { content: ""; position: absolute; top: -2px; right: -2px; left: -2px; height: 86px; background: #ffffff; border: 2px solid #77c04b; -webkit-box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14); -moz-box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14); box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14); } .mega-filtered-search .mega-dropdown.active:before { border-color: #0083c9; } .mega-dropdown.active:after { content: ""; position: absolute; left: 0; top: 2px; width: 100%; height: 80px; background: #ffffff; } .mega-dropdown.active>i { color: #686868; } .mega-dropdown.active .mega-content { display: block; } .mega-dropdown.active .mega-content>.inner { padding: 30px; } .mega-dropdown>button { border: none; background: none; font-size: 14px; line-height: 0; top: 0; height: 100%; width: 100%; position: absolute; left: 0; padding: 0 30px 0 15px; text-align: left; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .mega-dropdown>i { position: absolute; right: 15px; top: 50%; font-size: 14px; line-height: 0; color: #b7b7b7; } .mega-content { display: none; width: 690px; background: #fff; border: 2px solid #77c04b; position: absolute; top: 100%; left: -2px; z-index: 21; margin-top: 30px; -webkit-box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14); -moz-box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14); box-shadow: 0 0 21px 9px rgba(0, 0, 0, 0.14); } .mega-filtered-search .mega-content { border-color: #0083c9; width: 304px; } .dropdown-wrap.active .mega-content { display: block; } .dropdown-wrap .mega-content { margin-top: 0; border: 1px solid #f1f1f1; -webkit-box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.14); -moz-box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.14); box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.14); } .dropdown-wrap .mega-content>.inner { padding: 30px; } .mega-list>header { font-size: 14px; color: #151515; text-transform: capitalize; position: relative; padding-left: 30px; } .mega-list>header i { color: #77c04b; font-size: 24px; position: absolute; left: 0; top: 50%; line-height: 0; margin-top: -4px; } .mega-list ul { margin: 15px -30px 0; padding: 0 0 0 30px; font-size: 13px; } .mega-list ul li { display: block; width: 25%; float: left; padding-right: 40px; position: relative; } .mega-list ul li:after { content: "\\f105"; font-family: "FontAwesome"; position: absolute; right: 33px; top: 50%; line-height: 0; } .mega-list ul li a { display: block; color: inherit; } .mega-filtered-search .mega-dropdown { height: 50px; position: absolute; left: 0; top: 0; border: none; background: #f4f4f4; } .category-list { margin: 0; padding: 0 0; position: relative; } .category-list>li, .category-list>li>ul li { display: block } .category-list>li>a { display: block; padding: 12px 50px 12px 65px; font-size: 14px; position: relative } .category-list>li>ai { position: absolute; top: 50%; left: 15px; width: 50px; text-align: center; line-height: 0; } .category-list>li>a:after { content: "\\f105"; font-family: "FontAwesome"; position: absolute; right: 30px; top: 50%; line-height: 0; } .category-list>li:hover>a { background: #FED700; color: #FFF } .category-list>li:hover>ul { visibility: visible; filter: alpha(opacity=100); opacity: 1; } .category-list>li>ul { visibility: hidden; filter: alpha(opacity=0); opacity: 0; position: absolute; left: 100%; width: 100%; top: -2px; bottom: -2px; overflow-y: auto; background: #FED700; padding: 0 0; } .category-list>li>ul li a { display: block; padding: 12px 30px; font-size: 14px; text-decoration: none; color: #303E47 } .category-list>li>ul li a:hover { background: rgba(0, 0, 0, 0.05); color: #303E47 } .dropdown-wrap { text-align: left; position: relative; } .dropdown-wrap.active { display: block; } .dropdown-wrap { display: none; border: 1px solid #b7b7b7; background: #FFF; width: 180px; position: absolute; right: 0; top: 100%; -webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.14); -moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.14); box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.14); } .dropdown-wrap { width: 370px; } .dropdown-wrap { font-family: "FontAwesome"; content: "\\f0d8"; color: #ffffff; text-shadow: 0px -2px 0px #b7b7b7; font-size: 22px; position: absolute; right: 15px; line-height: 0; top: -2px; } .mega-dropdown-wrap { position: relative; } .mega-dropdown-wrap .mega-dropdown { width: 100%; border-width: 1px; height: 42px; max-width: 570px; } .mega-dropdown-wrap .mega-dropdown:before, .mega-dropdown-wrap .mega-dropdown:after { display: none !important; } .mega-dropdown-wrap .mega-dropdown .mega-content { min-width: 200px; width: 50%; margin-top: 0; border: 1px solid #e0e0e0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: #f4f4f4; left: -1px; } .mega-dropdown-wrap .mega-dropdown .mega-content .category-list>li>ul { border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; top: 0; bottom: 0; } .container { background: red; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div id="myGroup" class="container"> <div class="row rowd"> <h2 class="text-center">Select Category</h2> <hr/> <div class="panel"> <div class="row field-block"> <div class="col-xs-12 col-md-3"> <span class="required label"></span> </div> <div class="col-xs-12 col-md-9"> <div class="mega-dropdown-wrap"> <div class="mega-dropdown active"> <button>Select Category</button> <i class="fa fa-navicon"></i> <div class="mega-content"> <ul class="category-list"> <li><a href="#"><i class="fa fa-motorcycle"></i>Vehicles</a> <ul> <li><a href="#">Cars</a></li> <li><a href="#">Bus, van, truck</a></li> <li><a href="#">Industrial&nbsp;Vehicle</a></li> <li><a href="#">Motorcycle</a></li> <li><a href="#">Bicycle</a></li> <li><a href="#">Spare Parts &amp; Accessories</a></li> </ul> </li> <li><a href="#"><i class="fa fa-laptop"></i>Mobile&nbsp;&&nbsp;Computer</a> <ul> <li><a href="#">Mobile</a></li> <li><a href="#">Computer&nbsp;&&nbsp;Laptop</a></li> <li><a href="#">tablets</a></li> <li><a href="#">iPads</a></li> <li><a href="#">Accessories</a></li> </ul> </li> <li><a href="#"><i class="fa fa-cc-diners-club"></i>Home&nbsp;Appliances</a> <ul> <li><a href="#">TV-Audio-Video</a></li> <li><a href="#">Ac</a></li> <li><a href="#">Washing&nbsp;Machine</a></li> <li><a href="#">Fridge</a></li> <li><a href="#">Camera&nbsp;&&nbsp;Lense</a></li> <li><a href="#">Kitchen&nbsp;Accessories</a></li> <li><a href="#">Game-Entertainment</a></li> </ul> </li> <li><a href="#"><i class="fa fa-building"></i>Real&nbsp;Estate</a> <ul> <li><a href="#">For Sale</a></li> <li><a href="#">For Rent</a></li> </ul> </li> <li><a href="#"><i class="fa fa-female"></i>Fashion</a> <ul> <li><a href="#">Men</a></li> <li><a href="#">Women</a></li> <li><a href="#">Kids</a></li> </ul> </li> <li><a href="#"><i class="fa fa-co"></i>Furniture</a> <ul> <li><a href="#">Sofa&nbsp;&&nbsp;Dining</a></li> <li><a href="#">Bed&nbsp;&&nbsp;Wardrobes</a></li> <li><a href="#">Home&nbsp;Decor&nbsp;and&nbsp;garden</a></li> <li><a href="#">Kids&nbsp;Furniture</a></li> <li><a href="#">other&nbsp;furniture</a></li> </ul> </li> <li><a href="#"><i class="adicon-bell"></i>Jobs</a> <ul> <li><a href="#">Data Entry & Back Office</a></li> <li><a href="#">BPO and Telecaller</a></li> <li><a href="#">Sales and Marketing</a></li> <li><a href="#">Operator and Technician</a></li> <li><a href="#">Cook</a></li> <li><a href="#">IT Engineer and Developer</a></li> <li><a href="#">Designer</a></li> <li><a href="#">Reception and Front Office</a></li> <li><a href="#">Accountant</a></li> <li><a href="#">Teacher</a></li> <li><a href="#">Other Jobs</a></li> </ul> </li> <li><a href="#"><i class="adicon-hat"></i>Services</a> <ul> <li><a href="#">Driver and Taxi</a></li> <li><a href="#">Electronic Repair</a></li> <li><a href="#">Computer Center</a></li> <li><a href="#">Health and Beauty</a></li> <li><a href="#">Gym and Fitness</a></li> <li><a href="#">Sports and Equipment</a></li> <li><a href="#">Other Services</a></li> </ul> </li> <li><a href="#"><i class="adicon-dog"></i>Pets</a> <ul> <li><a href="#">Dogs</a></li> <li><a href="#">Cats</a></li> <li><a href="#">Food & Accessories</a></li> <li><a href="#">Other Pets</a></li> </ul> </li> <li><a href="#"><i class="adicon-heal"></i>Education</a> <ul> <li><a href="#">Books</a></li> <li><a href="#">Online&nbsp;Tutorials</a></li> <li><a href="#">Tution</a></li> </ul> </li> <li><a href="#"><i class="adicon-smile"></i>Matrimony</a> <ul> <li><a href="#">I&nbsp;Aa&nbsp;Male</a></li> <li><a href="#">i&nbsp;am&nbsp;female</a></li> </ul> </li> <li><a href="#"><i class="adicon-hearts"></i>Note&nbsp;&&nbsp;Coin</a> <ul> <li><a href="#">Note</a></li> <li><a href="#">Coins</a></li> </ul> </li> </ul> <div class="bor"></div><br> </div> </div> </div> </div> </div> </div> <div class="clearfix"></div><br> </div> </div> 

Answer 1

因此，如果我做對了，您希望首先顯示頂層菜單項，然后單擊其中的任何一個，就想在被單擊項的正下方顯示被單擊項的子菜單。

如果是這種情況，則可以使用“數據切換”和“如下所示的數據taregt屬性”來達到此效果。

<nav>
    <ul class="nav">        
        <li><a href="#" id="btn1" data-toggle="collapse" data-target="#submenu" aria-expanded="false">Toggle Me</a>
            <ul class="nav collapse" id="submenu" role="menu" aria-labelledby="btn1">
                <li><a href="#">Submenu1</a></li>
                <li><a href="#">Submenu2</a></li>
                <li><a href="#">Submenu3</a></li>
            </ul>
        </li>   
    </ul>
</nav>

這只是一個示例，使用此邏輯進一步構建其他菜單項，它們將在單擊的項的正下方打開。