引導響應側邊欄調整到小屏幕<800像素

Question

背景圖標菜單

不幸的是我沒有與現代的CSS（媒體查詢）太多的經驗，從PHP的世界即將到來。因此我不確定如何從邏輯上解決我的CSS佈局問題。

我正在嘗試創建一個用戶儀表板模板，並且一直在關注一些教程。此模板的要求如下：

1. 主要內容區域是引導響應
2. 側邊欄是摺疊成一個小圖標菜單
3. 如果屏幕是小於800像素工具欄菜單自動爲
4. 當側邊欄處於摺疊狀態（如果屏幕是< 800像素），可以重新打開

我所拼湊至今：

$(document).ready(function() { 
 
     $('#sidebar-btn').click(function() { 
 
      $('#sidebar-wrapper').toggleClass('visible'); 
 
      $('#wrapper').toggleClass('visible'); 
 
     }); 
 
    });

/* navbar */ 
 
.navbar { 
 
    margin-left:50px; 
 
} 
 

 
/* main content */ 
 
#page-content-wrapper { 
 
    width:100%; 
 
    position:absolute; 
 
    padding:15px; 
 
    padding-top:50px; 
 
} 
 

 
/* sidebar minimized */ 
 
#sidebar-wrapper { 
 
    background:#444444; 
 
    display:block; 
 
    position:fixed; 
 
    height:100%; 
 
    z-index:1; 
 
} 
 
#sidebar-wrapper ul { 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 
#sidebar-wrapper ul li { 
 
    list-style:none; 
 
} 
 
#sidebar-wrapper ul li i { 
 
    font-size:24px; 
 
} 
 
#sidebar-wrapper ul li span:nth-child(2) { 
 
    display:none; 
 
} 
 
#sidebar-wrapper ul li a { 
 
    display:block; 
 
    padding:12px 12px; 
 
    width:50px; 
 
    color:#eeeeee; 
 
    background:#222222; 
 
    border-bottom:1px solid #444444; 
 
} 
 
#sidebar-wrapper ul li a:hover { 
 
    color: #aaaaaa; 
 
    background-color: #444444; 
 
    text-decoration:none; 
 
} 
 
#sidebar-header { 
 
    height:50px; 
 
    background:#444444; 
 
} 
 
#sidebar-header h3 { 
 
    display:none; 
 
} 
 
#sidebar-btn { 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    cursor:pointer; 
 
    position:absolute; 
 
    top:0px; 
 
    right:0px; 
 
} 
 
#sidebar-btn i { 
 
    font-size:18px; 
 
    color:#ffffff; 
 
    padding:16px; 
 
} 
 
/* set element styles to fit tablet and higher(desktop) */ 
 
@media screen and (min-width: 800px) { 
 
    /* sidebar visible */ 
 
    #sidebar-wrapper.visible { 
 
     left:0px; 
 
    } 
 
    #sidebar-wrapper.visible ul li span:nth-child(2) { 
 
     display:inline-block; 
 
    } 
 
    #sidebar-wrapper.visible ul li i { 
 
     color: #777777; 
 
     font-size:14px; 
 
     min-width: 20px; 
 
     text-align: center; 
 
    } 
 
    #sidebar-wrapper.visible ul li a { 
 
     background:#222222; 
 
     color:#cccccc; 
 
     border-bottom:1px solid #444444; 
 
     display:block; 
 
     width:200px; 
 
     padding:15px; 
 
     font-size:14px; 
 
    } 
 
    #sidebar-wrapper.visible ul li a:hover { 
 
     background:#777777; 
 
     color:#eeeeee; 
 
    } 
 
    #sidebar-wrapper.visible h3 { 
 
     display:inline-block; 
 
     margin:0px; 
 
     color:#fff 
 
    } 
 
    #wrapper.visible #page-content-wrapper { 
 
     padding-left:200px; 
 
    } 
 
    #wrapper.visible .navbar { 
 
     margin-left:200px; 
 
    } 
 
}

<!-- Latest compiled and minified CSS --> 
 

 
<script src="https://use.fontawesome.com/3c2244d372.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper" class="visible"> 
 
    <!-- sidebar --> 
 
    <div id="sidebar-wrapper" class="visible"> 
 
     <div id="sidebar-header"> 
 
      <h3></h3> 
 
     </div> 
 
     <ul class="sidebar-nav"> 
 
      <li><a href="#"><span><i class="fa fa-tachometer"></i></span><span>Dashboard</span></a></li> 
 
      <li><a href="#"><span><i class="fa fa-calendar"></i></span><span>Schedule</span></a></li> 
 
      <li><a href="#"><span><i class="fa fa-credit-card"></i></span><span>Orders</span></a></li> 
 
      <li><a href="#"><span><i class="fa fa-cogs"></i></span><span>Settings</span></a></li> 
 
      <li><a href="#"><span><i class="fa fa-life-ring"></i></span><span>Help</span></a></li> 
 
     </ul> 
 
     <div id="sidebar-btn"> 
 
      <i class="fa fa-bars" aria-hidden="true"></i> 
 
     </div> 
 
    </div> 
 
    <!-- end sidebar --> 
 

 
    <!-- main content --> 
 
    <div id="page-content-wrapper"> 
 

 
     <nav class="navbar navbar-fixed-top navbar-inverse"> 
 
      <div class="container"> 
 
       <div id="navbar"> 
 
        <ul class="nav navbar-nav navbar-right"> 
 
         <li><a href="#">Signed in as</a></li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </nav> 
 

 
     <div class="container-fluid"> 
 

 
      <div class="row"> 
 
     <div class="col-md-12"> 
 
      <h1>Test Page</h1> 
 
      <br> 
 
      <p> 
 
       "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." 
 
      </p> 
 
     </div> 
 
    </div> 
 

 
     </div> 
 
    </div> 
 
</div>

問題

我有第四點麻煩。到目前爲止，如果我調整屏幕大小，邊欄會彈出一個圖標菜單，但當屏幕處於小型模式時，我不能再展開該菜單。我如何覆蓋CSS的特殊性，以便當可見類被切換時，即使屏幕很小，我也可以再次查看菜單。

Answer 1

在我看來，你沒有正確的代碼在最大寬度爲800px的屏幕上顯示＃sidebar-wrapper。你宣佈@media規則：

@media screen and (min-width: 800px) 

和嵌套的所有代碼，它顯示側邊欄，所以在這種情況下，jQuery將只在屏幕超過800像素擴展側欄。

嘗試做同樣的事情

@media (max-width: 800px) 

但是，據我瞭解，有媒體查詢沒有必要在這種情況下，因爲你想在所有尺寸的屏幕相同的可擴展側欄。

UPD
改變你現有的JS代碼到這一個：

$(document).ready(function() { 
if (window.matchMedia('(max-width: 800px)').matches) { 

    $('#sidebar-wrapper').removeClass('visible') 
    $('#wrapper').removeClass('visible'); 

    $('#sidebar-btn').click(function() { 

    $('#sidebar-wrapper').toggleClass('visible'); 
    $('#wrapper').toggleClass('visible'); 
    }); 
} else { 
    $('#sidebar-btn').click(function() { 

     $('#sidebar-wrapper').toggleClass('visible'); 
     $('#wrapper').toggleClass('visible'); 
    }); 
    } 
}); 

你也將需要刪除這一行：

@media screen and (min-width: 800px) { 

，不要忘記刪除最後的大括號。