如何在 bootstrap 中使用 flexbox 列制作可滚动菜单

Question

我使用 Bootstrap 创建了一个菜单。我不希望内容在列模式下溢出并在到达菜单末尾后自动向下移动。这个 megamenu 的子菜单具有可变高度，这就是为什么我要使用 column flex 属性。 enter image description here

我希望输出如下图所示： enter image description here

这是我的超级菜单代码：

.dropdown-menu.show {
    left: 0 !important;
    right: 0 !important;
    max-height: 260px;
    flex-direction: column;
    display: flex;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<ul class="nav nav-pills">
  <li class="nav-item dropdown position-static">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="border dropdown-menu dropdown-menu-md-right py-2 shadow" aria-labelledby="bd-versions2">
                                <div class="row mx-0">
                                    
                                    <div class="col-12">
                                            <div class="align-content-between align-items-center flex-column row" style="max-height: 288px;">
                                                <div class="col-sm-2">
                                                    <ul class="tpcategory px-0">
                                                        <li class="dropdown-header p-2">JAVA</li>
                                                        <li class="dropdown-divider m-0"></li>
                                                        <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
                                                    </ul>
                                                </div>
                                                <div class="col-sm-2">
                                                    <ul class="tpcategory px-0">
                                                        <li class="dropdown-header p-2">JAVA</li>
                                                        <li class="dropdown-divider m-0"></li>
                                                        <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
                                                    </ul>
                                                </div>
                                                <div class="col-sm-2">
                                                    <ul class="tpcategory px-0">
                                                        <li class="dropdown-header p-2">JAVA</li>
                                                        <li class="dropdown-divider m-0"></li>
                                                        <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
                                                    </ul>
                                                </div>
                                                <div class="col-sm-2">
                                                    <ul class="tpcategory px-0">
                                                        <li class="dropdown-header p-2">JAVA</li>
                                                        <li class="dropdown-divider m-0"></li>
                                                        <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
                                                    </ul>
                                                </div>
                                                <div class="col-sm-2">
                                                    <ul class="tpcategory px-0">
                                                        <li class="dropdown-header p-2">JAVA</li>
                                                        <li class="dropdown-divider m-0"></li>
                                                        <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                                                        <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
                                                    </ul>
                                                </div>
                                            <div class="col-sm-2">
                                                <ul class="tpcategory px-0">
                                                    <li class="dropdown-header p-2">++C</li>
                                                    <li class="dropdown-divider m-0"></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                                                    <li class="mega-menu-subcategory"><a href="#">String and Date</a></li>
                                                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li></ul>
                                            </div>
                                            <div class="col-sm-2">
                                                <ul class="tpcategory px-0">
                                                    <li class="dropdown-header p-2">PHP</li>
                                                    <li class="dropdown-divider m-0"></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Cookie &amp; Session</a></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Date And Time</a></li>
                                                </ul>
                                            </div>              
                                            <div class="col-sm-2">
                                                <ul class="tpcategory px-0">
                                                    <li class="dropdown-header p-2">Python</li>
                                                    <li class="dropdown-divider m-0"></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Tkinter</a></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Databse</a></li>
                                                </ul>
                                            </div>
                                            <div class="col-sm-2">
                                                <ul class="tpcategory px-0">
                                                    <li class="dropdown-header p-2">Kotlin</li>
                                                    <li class="dropdown-divider m-0"></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                                                </ul>
                                            </div>
                                        <div class="col-sm-2">
                                                <ul class="tpcategory px-0">
                                                    <li class="dropdown-header p-2">Kotlin</li>
                                                    <li class="dropdown-divider m-0"></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                                                </ul>
                                            </div><div class="col-sm-2">
                                                <ul class="tpcategory px-0">
                                                    <li class="dropdown-header p-2">Kotlin</li>
                                                    <li class="dropdown-divider m-0"></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                                                </ul>
                                            </div><div class="col-sm-2">
                                                <ul class="tpcategory px-0">
                                                    <li class="dropdown-header p-2">Kotlin</li>
                                                    <li class="dropdown-divider m-0"></li>
                                                    <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                                                </ul>
                                            </div></div>
                                    </div>
                                </div>
                            </div>
  </li>
</ul>

Answer 1

我已经编辑了你的代码，你可以看到它或复制它也许它可以帮助

<div class="nav-item dropdown tuts mega-menu static">
    <!-- <div class="dropdown dropright"> -->
    <a class="nav-link dropdown-toggle" href="#" id="bd-versions2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Mega Menu
    </a>
    <div class="border dropdown-menu dropdown-menu-md-right shadow" aria-labelledby="bd-versions2">
            
            
                    <div class="   d-md-flex flex-wrap" >
                        <div style="margin-right: 2%; margin-left: 10px;">
                            <!-- <ul class="tpcategory px-0"> -->
                                <div class="dropdown-header p-2">JAVA</div>
                                <div class="dropdown-divider m-0"></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="text-category.php">Language Fundamentals</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Window Form</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">.Net Framework</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">LINQ</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">ADO.NET</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Refrence</a></div>
                            <!-- </ul> -->
                        </div>
                        <div style="margin-right: auto;">
                            <!-- <ul class="tpcategory px-0"> -->
                                <div class="dropdown-header p-2">JAVA</div>
                                <div class="dropdown-divider m-0"></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="text-category.php">Language Fundamentals</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Window Form</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">.Net Framework</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">LINQ</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">ADO.NET</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Refrence</a></div>
                            <!-- </ul> -->
                        </div>
                        <div style="margin-right: auto;">
                            <!-- <ul class="tpcategory px-0"> -->
                                <div class="dropdown-header p-2">JAVA</div>
                                <div class="dropdown-divider m-0"></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="text-category.php">Language Fundamentals</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Window Form</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">.Net Framework</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">LINQ</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">ADO.NET</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Refrence</a></div>
                            <!-- </ul> -->
                        </div>
                        <div style="margin-right: auto;">
                            <!-- <ul class="tpcategory px-0"> -->
                                <div class="dropdown-header p-2">JAVA</div>
                                <div class="dropdown-divider m-0"></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="text-category.php">Language Fundamentals</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Window Form</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">.Net Framework</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">LINQ</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">ADO.NET</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Refrence</a></div>
                            <!-- </ul> -->
                        </div>
                        <div style="margin-right: auto;">
                            <!-- <ul class="tpcategory px-0"> -->
                                <div class="dropdown-header p-2">JAVA</div>
                                <div class="dropdown-divider m-0"></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="text-category.php">Language Fundamentals</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Window Form</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">.Net Framework</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">LINQ</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">ADO.NET</a></div>
                                <div class="mega-menu-subcategory dropdown-item"><a href="#">Refrence</a></div>
                            <!-- </ul> -->
                        </div>
                    <div style="margin-right: auto;">
                        <!-- <ul class="tpcategory px-0"> -->
                            <div class="dropdown-header p-2">++C</div>
                            <div class="dropdown-divider m-0"></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Language Fundamentals</a></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">String and Date</a></div>
                        <div class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></div>
                    <!-- </ul> -->
                    </div>
                    <div style="margin-right: auto;">
                        <!-- <ul class="tpcategory px-0"> -->
                            <div class="dropdown-header p-2">PHP</div>
                            <div class="dropdown-divider m-0"></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Language Fundamentals</a></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Cookie &amp; Session</a></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Date And Time</a></div>
                        <!-- </ul> -->
                    </div>              
                    <div style="margin-right: auto;">
                        <!-- <ul class="tpcategory px-0"> -->
                            <div class="dropdown-header p-2">Python</div>
                            <div class="dropdown-divider m-0"></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Language Fundamentals</a></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Tkinter</a></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Databse</a></div>
                        <!-- </ul> -->
                    </div>
                    <div style="margin-right: auto;">
                        <!-- <ul class="tpcategory px-0"> -->
                            <div class="dropdown-header p-2">Kotlin</div>
                            <div class="dropdown-divider m-0"></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Language Fundamentals</a></div>
                        <!-- </ul> -->
                    </div>
                <div style="margin-right: auto;">
                        <!-- <ul class="tpcategory px-0"> -->
                            <div class="dropdown-header p-2">Kotlin</div>
                            <div class="dropdown-divider m-0"></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Language Fundamentals</a></div>
                        <!-- </ul> -->
                    </div><div style="margin-right: auto;">
                        <!-- <ul class="tpcategory px-0"> -->
                            <div class="dropdown-header p-2">Kotlin</div>
                            <div class="dropdown-divider m-0"></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Language Fundamentals</a></div>
                        <!-- </ul> -->
                    </div><div style="margin-right: auto;">
                        <!-- <ul class="tpcategory px-0"> -->
                            <div class="dropdown-header p-2">Kotlin</div>
                            <div class="dropdown-divider m-0"></div>
                            <div class="mega-menu-subcategory dropdown-item"><a href="#">Language Fundamentals</a></div>
                        <!-- </ul> -->
                    </div></div>
            </div>
     
    <!-- </div> -->
</div>

如果您遇到任何问题，请告诉

Answer 2

我对以下代码进行了更改以制作可滚动菜单。

<!-- Remove align-content-between align-items-center flex-column  -->
<!-- Add overflow-y: auto; overflow-x: hidden; -->
<!-- Change "max-height: 288px;" to "max-height: 250px;"-->
<div class="row" style="max-height: 250px; overflow-y: auto; overflow-x: hidden;">

.dropdown-menu.show {
  left: 0 !important;
  right: 0 !important;
  max-height: 260px;
  flex-direction: column;
  display: flex;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<ul class="nav nav-pills">
  <li class="nav-item dropdown position-static">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="border dropdown-menu dropdown-menu-md-right py-2 shadow" aria-labelledby="bd-versions2">
      <div class="row mx-0">

        <div class="col-12">
          <!-- Remove align-content-between align-items-center flex-column  -->
          <!-- Add overflow-y: auto; overflow-x: hidden; -->
          <!-- Change "max-height: 288px;" to "max-height: 250px;"-->
          <div class="row" style="max-height: 250px; overflow-y: auto; overflow-x: hidden;">
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">++C</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">String and Date</a></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">PHP</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Cookie &amp; Session</a></li>
                <li class="mega-menu-subcategory"><a href="#">Date And Time</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Python</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Tkinter</a></li>
                <li class="mega-menu-subcategory"><a href="#">Databse</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Kotlin</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Kotlin</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Kotlin</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Kotlin</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

编辑 1：删除 overflow-x、overflow-y 和 max-height: 250px; 样式并删除 .dropdown-menu.show

中的 max-height

<!-- Remove align-content-between align-items-center flex-column  -->
<!-- Remove overflow-y: auto; overflow-x: hidden; -->
<!-- Remove "max-height: 250px;"-->
<div class="row">

.dropdown-menu.show {
  left: 0 !important;
  right: 0 !important;
  /* max-height: 260px; */
  flex-direction: column;
  display: flex;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



<ul class="nav nav-pills">
  <li class="nav-item dropdown position-static">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="border dropdown-menu dropdown-menu-md-right py-2 shadow" aria-labelledby="bd-versions2">
      <div class="row mx-0">

        <div class="col-12">
          <!-- Remove align-content-between align-items-center flex-column  -->
          <!-- Remove overflow-y: auto; overflow-x: hidden; -->
          <!-- Remove "max-height: 250px;"-->
          <div class="row">
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">JAVA</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="text-category.php">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Window Form</a></li>
                <li class="mega-menu-subcategory"><a href="#">.Net Framework</a></li>
                <li class="mega-menu-subcategory"><a href="#">LINQ</a></li>
                <li class="mega-menu-subcategory"><a href="#">ADO.NET</a></li>
                <li class="mega-menu-subcategory"><a href="#">Refrence</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">++C</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">String and Date</a></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">PHP</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Cookie &amp; Session</a></li>
                <li class="mega-menu-subcategory"><a href="#">Date And Time</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Python</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
                <li class="mega-menu-subcategory"><a href="#">Tkinter</a></li>
                <li class="mega-menu-subcategory"><a href="#">Databse</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Kotlin</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Kotlin</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Kotlin</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
            <div class="col-sm-2">
              <ul class="tpcategory px-0">
                <li class="dropdown-header p-2">Kotlin</li>
                <li class="dropdown-divider m-0"></li>
                <li class="mega-menu-subcategory"><a href="#">Language Fundamentals</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

如何在 bootstrap 中使用 flexbox 列制作可滚动菜单

How to make scrollable menu with flexbox column in bootstrap

css

megamenu

flexbox

twitter-bootstrap

bootstrap-4