Bootstrap переключает сгиб гибкого столбца подменю от строки к столбцу на шоу - PullRequest
0 голосов
/ 12 февраля 2020

Я сделал подменю, отображаемое в столбце при нажатии на кнопку. Подменю работает и отображается в столбце, но есть небольшая ошибка, которая показывает его в строке в течение секунды, а затем переключается на столбец. Чего-то не хватает в моем коде?

<div class="container">
<div class="row">
<div class="col-6">
  <div class="card">
    <a class="p-0 text-decoration-none" data-toggle="collapse" href="#sub-menu" role="button">
      <h6 class="card-header"><i class="fa fa-folder mr-2"></i>Open sub-menu</h6>
    </a>
    <div id="sub-menu" class="collapse nav flex-column bg-transparent">
      <a class="nav-link btn btn-light mt-1 mb-1" href="#">First Link</a>
      <a class="nav-link btn btn-light mb-1" href="#">Second Link</a>
      <a class="nav-link btn btn-light mb-1" href="#">Third Link</a>
      <a class="nav-link btn btn-light mb-1" href="#">Forth Link</a>
      <a class="nav-link btn btn-light mb-1" href="#">Fifth Link</a>
    </div>
  </div>
</div>

Вот скрипка с примером: https://jsfiddle.net/mp9007/4rm0fsvx/5/

Спасибо

1 Ответ

0 голосов
/ 12 февраля 2020

Просто удалите класс nav из #sub-menu div. Вероятно, коллапс и .nav имеют конфликты стилей, потому что .nav добавляет display: flex к элементу.

...