如何修改Bootstrap折叠项的CSS内边距类？

方法一：用Bootstrap响应式间距类（推荐） #

直接把表单的pe-5类换成pe-lg-5。Bootstrap的响应式间距类会根据屏幕断点生效，pe-lg-5意思是**仅在lg及以上尺寸的屏幕（折叠按钮不显示的大屏）**应用右内边距，小屏（折叠状态）自动取消这个内边距，完全贴合需求，不用额外写CSS或JS。

方法二：自定义CSS修复 #

如果一定要保留原类，调整CSS选择器的优先级，确保折叠状态下的样式能覆盖原样式：

/* 确保选择器优先级足够覆盖Bootstrap的pe-5类 */
#navbarCollapse.navbar-collapse.show #top-search-form {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

之前没生效大概率是因为pe-5的优先级和你写的CSS优先级相同，Bootstrap的样式加载顺序在后导致覆盖，加!important可以强制生效，或者你也可以给选择器加更多层级（比如加上父元素的类）来提高优先级。

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