Bootstrap 4 在响应式隐藏列中切换内容？答案

【问题标题】：Bootstrap 4 toggle content inside responsive hidden col?Bootstrap 4 在响应式隐藏列中切换内容？
【发布时间】：2018-10-25 15:51:09
【问题描述】：

我正在使用 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;}
}

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

Codepen：https://codepen.io/TrafalgarLaw119/pen/yRQWoY

我想要做的是添加按钮，当单击该按钮时，将在页面内容上显示侧边栏。我的问题是我无法显示侧边栏。感谢您的帮助。

【问题讨论】：

标签： twitter-bootstrap bootstrap-4

【解决方案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 表示 display: block !important，所以 jquery 不会覆盖它，bootstrap class collapse 只是表示 display: block;

【讨论】：

【解决方案2】：

不要在left-sidebar 中使用d-none d-sm-none d-md-block，而是将display 属性放在您的样式中：

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

【讨论】：