Question

我使用了下拉类，想要使用一个按钮下拉列表，我想在一个下拉级别显示更多的孩子。

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"aria- 
expanded="false">Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

Answer 1

Bootstrap本身不支持它。所以你必须自己做一些css / javascript / html魔法或使用库。

不支持嵌套下拉列表，自v3以来一直没有。

source

Answer 2

Bootstrap v4.1中没有直接的本机支持。您需要在BootStrap中手动自定义现有的编码结构。但如果你只是学习自助训练，那可能会很棘手。

对您的一个小建议：选择我公司开发的新框架：https://www.offra.io/components/dropdown.php

您可以使用Offra实现此类多级下拉菜单，而无需太多开销！您可以自己尝试下面的代码片段：

<div class="dropdown">
    <button class="btn" id="dropdown8" data-activity="dropdown">Drop Down</button>
    <div class="offra-dropdown  sh-3dp" data-target-dropdown="dropdown8">
       <ul>
           <li>
               <a href="#">
                   Menu1-label 1
               </a>
           </li>
           <li>
               <a href="#">
                   Menu2-label 1
               </a>
               <ul>
                   <li>
                       <a href="#">
                           Menu2-child1-label 2
                       </a>
                       <ul>
                           <li>
                               <a href="#">
                                   Menu2-child1-label 3
                               </a>
                           </li>
                           <li>
                               <a href="#">
                                  Menu2-child2-label 3
                               </a>
                           </li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">
                           Menu2-child2-label 2
                       </a>
                   </li>
               </ul>
           </li>
           <li>
               <a href="#">
                   Menu3-label 1
               </a>
               <ul>
                   <li>
                       <a href="#">
                           Menu3-child1-label 2
                       </a>
                       <ul>
                           <li>
                               <a href="#">
                                   Menu3-child1-label 3
                               </a>
                           </li>
                           <li>
                               <a href="#">
                                  Menu3-child2-label 3
                               </a>
                           </li>
                       </ul>
                   </li>
                   <li>
                       <a href="#">
                           Menu3-child2-label 2
                       </a>
                   </li>
               </ul>
           </li>
           <li>
               <a href="#">
                   Menu4-label 1
               </a>
           </li>
       </ul>
    </div>
</div>

如何在Bootstrap v4.1中实现多级下拉？

2 个答案: