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();
    });
});

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

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

Answer 1

将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 */
 }
}

Answer 2

将第一列的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类折叠仅表示display：block;

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

2 个答案: