Bootstrap 4 переключает содержимое внутри адаптивного скрытого col?

Question

Я использую Bootstrap 4 для разработки веб-сайта, который имеет 3 столбца, причем самый левый столбец скрыт на мобильных устройствах и планшетах.Код выглядит так:

HTML

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-3 d-none d-sm-none d-md-block" id="left-sidebar">
            <div id="left-block">
              <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Four</li>
                <li>Five</li>
                <li>Six</li>
              </ul>
            </div>
        </div>
        <div class="col-12 col-sm-8 col-md-6" id="main-content">
            <button id="toggle-button" class="btn btn-primary d-block d-sm-block d-md-none" role="button">show left sidebar</button>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
        <div class="col-12 col-sm-4 col-md-3" id="right-sidebar">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div>
</div>

CSS

#left-sidebar{background-color:#ffcccc;}
@media (max-width: 768px) { 
  #left-sidebar{position:fixed;top:0;left:0;overflow-y:scroll;z-index:10000;}
}

JS

$( document ).ready(function() {
    $( "#toggle-button" ).click(function() {
       $("#left-sidebar").show();
    });
});

Кодовый адрес: https://codepen.io/TrafalgarLaw119/pen/yRQWoY

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

Answer 1

Измените HTML-код вашего первого столбца на:

<div class="col-12 col-md-3 collapse d-md-block" id="left-sidebar">
  <div id="left-block">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
      <li>Four</li>
      <li>Five</li>
      <li>Six</li>
   </ul>
</div>

d-none Meanse display: block! Важный, чтобы jquery не перезаписывал его, просто сверните класс начальной загрузкиозначает отображение: блок;

Answer 2

Вместо использования d-none d-sm-none d-md-block в left-sidebar установите свойство display в своем стиле:

@media (max-width: 768px) { 
 #left-sidebar{
  position:fixed;top:0;left:0;overflow-y:scroll;z-index:10000; 
  display: none; /* add this property */
 }
}