Bootstrap 4.1.1实现仅小于768px屏幕显示按钮的问题排查

嘿，这个问题我熟！你遇到的核心问题是Bootstrap 4正式版（包括你用的4.1.1）已经废弃了alpha版本里的hidden-*系列类，改用了一套全新的响应式显示控制类，所以你的旧代码自然达不到预期效果。

具体问题拆解 #

你想实现的是「按钮仅在屏幕尺寸小于768px时显示」——对应Bootstrap的断点规则，768px是md断点的起始值（md代表≥768px的屏幕），所以需求等价于「在md及以上尺寸的屏幕隐藏按钮，在md以下（<768px）显示」。

但你用的hidden-md-down是Bootstrap 4 alpha阶段的旧类名，正式版已经完全移除了这类命名，换成了基于d-*的display控制类，所以你的4.1.1版本根本不会识别这个类，按钮的显示逻辑自然出错。

正确代码写法 #

改用Bootstrap 4正式版的响应式display类，只需要给按钮加上d-md-none类即可：

<button type="button" id="leftSidebarCollapse" class="navbar-btn d-md-none">
  <span></span>
  <span></span>
  <span></span>
</button>

类名规则说明 #

Bootstrap 4的响应式显示类遵循d-{breakpoint}-{value}的命名规则：

• breakpoint可选值：xs（<576px）、sm（≥576px）、md（≥768px）、lg（≥992px）、xl（≥1200px）
• value可选值：none、inline、inline-block、block等

d-md-none的意思是：在md及以上尺寸的屏幕，设置元素为display: none；在md以下的屏幕，保持元素默认的display属性（按钮默认是inline-block，所以会正常显示），完美匹配你的需求。

内容的提问来源于stack exchange，提问作者Abdus Sattar Bhuiyan