Bootstrap 4 потенциальная ошибка отзывчивой навигационной панели, дополнительное место включено в свернутый div

Question

Я вполне уверен, что нашел ошибку в laravel включенном bootstrap jquery сворачивающемся коде div. У меня есть боковая панель, которая сворачивается в меню с точкой останова определенного размера экрана. Я создал пост ранее по этому поводу, но у меня появилась возможность еще немного поработать с ним и обнаружил кое-что довольно странное. В моем предыдущем посте о нескольких проблемах я описал, как под этим меню иногда бывают невероятно уродливые пустые места, изображенные здесь ] 1 )

Самое странное в этом целом Ситуация такова, что на другой вкладке после закрытия меню оно отображается без лишних пробелов. Фактически, каждая вкладка имеет различное количество серого пространства под ней. Я подумал, что это может быть связано с макетом содержимого вкладки, но стандартизация не дала эффекта. Тогда я подумал, что, возможно, это как-то связано с тем, как остальные скрытые элементы делятся на группы и создают пустое пространство, но область серого прямоугольника не имеет ничего общего с порядком элементов. Я проверил element'd, чтобы увидеть, что происходит, но все, что произошло, было (от вкладки к вкладке), фактическая высота самого свернутого div изменилась, с ~ 450px (фактический размер всех элементов в меню) до ~ 630px на странице с худшим примером этой проблемы. Я пришел к выводу, что дополнительное пространство после 450px - это пространство, которое добавляется в виде серого, но поскольку панель навигации не изменяется от вкладки к вкладке, я не знаю, как она может изменить размер.

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

Вот код для navbar

<nav class="navbar navbar-expand-md flex-fill flex-column justify-content-start bg-secondary">
   <button class="navbar-toggler" data-toggle="collapse" data-target="#sidebarNav">Menu</button>
       <div class="col-sm bg-secondary portlet-container portlet-dropzone px-0 align-top mt-0">
          <div class="collapse navbar-collapse" id="sidebarNav">
               <div class="nav flex-column nav-pills w-100" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link active text-white" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
                    <a class="nav-link text-white" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
                    <a class="nav-link text-white mb-4" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
                </div>
          </div>
     </div>
</nav>
 <div class="col-sm-10 px-0">
       @include('../inc/messages')
       <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">@yield('maintab')</div>
          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">@yield('secondarytab')</div>
      </div>
</div>

Любой, и я имею в виду любой, помощь будет быть оцененным.