在Web开发中，Bootstrap是一个非常流行的前端框架，它提供了许多易于使用的组件来帮助开发者快速搭建响应式网页。Bootstrap4的侧边栏（Navbar）组件就是其中一个非常实用的功能。本文将介绍如何使用Bootstrap4的侧边栏来实现手机端侧边栏自动隐藏，电脑端显示的效果。
一、Bootstrap4侧边栏基础
Bootstrap4的侧边栏可以通过CSS和JavaScript来控制其显示和隐藏。在默认情况下，侧边栏是折叠的，只有点击按钮才能展开。
1.1 基础HTML结构
1.2 CSS样式
Bootstrap4提供了丰富的CSS样式来美化侧边栏，你可以根据自己的需求进行调整。
二、手机端侧边栏自动隐藏
为了让手机端侧边栏自动隐藏，我们需要结合JavaScript和CSS来实现。
2.1 CSS样式
首先，我们需要为手机端的屏幕尺寸设置一个特殊的CSS样式，将侧边栏折叠起来。
@media (max-width: 768px) {
.navbar-collapse {
display: none !important;
}
}
2.2 JavaScript脚本
然后，我们可以使用JavaScript来监听屏幕尺寸变化，并在屏幕尺寸小于768px时自动折叠侧边栏。
function toggleNavbar() {
if (window.innerWidth <= 768) {
document.querySelector('.navbar-collapse').style.display = 'none';
} else {
document.querySelector('.navbar-collapse').style.display = 'block';
}
}
window.addEventListener('resize', toggleNavbar);
三、电脑端显示效果
为了让电脑端侧边栏在屏幕尺寸大于768px时显示，我们不需要做任何额外操作，因为Bootstrap4的侧边栏默认就是展开的。
四、总结
通过以上方法，我们可以轻松实现Bootstrap4侧边栏在手机端自动隐藏，电脑端显示的效果。这有助于提升用户体验，尤其是在移动端浏览时，能够更好地利用屏幕空间。希望本文能对你有所帮助。