Как сделать прокручиваемое меню с колонкой flexbox в бутстрапе

Я создал меню с помощью Bootstrap. Я не хочу, чтобы содержимое переполнялось в режиме столбца и автоматически перемещалось вниз после достижения конца меню. Подменю этого мегаменю имеют переменную высоту, поэтому я хочу использовать свойство гибкости столбца. введите здесь описание изображения

я хочу, чтобы вывод был похож на изображение ниже: введите здесь описание изображения

это мой код мегаменю:

.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>


css flexbox twitter-bootstrap bootstrap-4 megamenu
person younes    schedule 24.06.2020    source источник
comment
Привет, текущие предоставленные коды не похожи на ваше изображение. Не могли бы вы опубликовать полный код для вашего меню? Спасибо.   -  person yinsweet    schedule 24.06.2020
comment
@yinsweet спасибо, я отредактировал вопрос, теперь код фрагмента правильный, пожалуйста, запустите его   -  person younes    schedule 24.06.2020

Ответы (2)


arrow_upward
0
arrow_downward

Я внес следующие изменения в код, чтобы сделать прокручиваемое меню.

<!-- 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; и удалить max-height в .dropdown-menu.show

<!-- 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>

person yinsweet    schedule 24.06.2020
comment
Нет, друг мой, смотри, я хочу, чтобы если категории переливались из окошка, то они отображались под остальными категориями (в новой строке), они были скрыты в твоем коде, а я хочу быть в ряд. - person younes; 24.06.2020
comment
Привет, вы можете удалить стили overflow-x и overflow-y, и они всегда будут видны. Но затем вы можете изменить максимальную высоту .dropdown-menu.show, чтобы все содержимое отображалось внутри контейнера. - person yinsweet; 24.06.2020
comment
Нет способа автоматически увеличить высоту и предотвратить манипулирование ею вручную? Я хочу, чтобы все происходило автоматически (без js) - person younes; 24.06.2020
comment
Удалите максимальную высоту, и это будет автоматически. Вы можете увидеть второй фрагмент кода, который я сделал, чтобы проверить, является ли это вашим желаемым результатом. - person yinsweet; 24.06.2020

arrow_upward
0
arrow_downward

я отредактировал ваш код, вы можете увидеть его или скопировать, может быть, это поможет

<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>

если вы столкнулись с какой-либо проблемой, пожалуйста, сообщите

person Vishesh Goyal    schedule 24.06.2020
comment
нет, если в одной из категорий меньше подкатегорий, я хочу, чтобы следующая категория верхнего уровня отображалась под этой категорией, в вашем фрагменте почти все верхние категории имеют одинаковые подкатегории, я не хочу использовать flex-row на экранах lg, я просто хочу использовать гибкие столбцы - person younes; 24.06.2020