移动端隐藏W3Schools的w3-rightbar右边框而非整个元素的问题

你之前的问题出在使用了display: none——这个属性会直接让整个带.w3-rightbar类的元素（包括内容和边框）完全从页面中消失，显然不是你要的效果。要实现仅隐藏右边框、保留元素和内容的需求，你需要针对该类的边框样式进行修改，而非隐藏元素本身。

正确的CSS代码 #

@media only screen and (max-width: 480px) {
  .w3-rightbar {
    border-right: none !important;
  }
}

代码说明 #

1. 替换掉原来的display: none，改为设置border-right: none，直接移除右边框样式
2. 添加!important是为了确保这个样式能覆盖W3Schools原生.w3-rightbar类的边框定义（框架类的样式优先级通常较高）
3. 如果不想使用!important，可以通过提高选择器优先级来实现，比如结合元素的其他类：

@media only screen and (max-width: 480px) {
  .w3-quarter.w3-rightbar {
    border-right: none;
  }
}

这样修改后，在屏幕宽度≤480px的移动端视图中，Div 1的内容会正常显示，只有原来的粗右边框会被隐藏。

内容的提问来源于stack exchange，提问作者Satheesh Kumar