我有一个简单的导航栏，主要是从Bootstrap的导航栏教程中复制的。基本上，我使用Bootstrap类“pe-5”在窗体上添加填充。（我只使用pe-5来更好地演示这一点，如果我能解决这个问题，我可能会减少它），所以它与导航栏的右侧对齐，与屏幕边缘留有一些空间，和一个可折叠的按钮，当窗体被折叠时，该按钮会出现（请原谅我的词汇，因为我对webdev和bootstrap（和flexbox）都是新手）。（所以当我缩小窗口直到按钮出现，然后单击折叠按钮时），填充仍然在表单输入和搜索按钮上，看起来怪异而关闭。
是否有办法更改折叠项目的CSS？我尝试了很多方法，包括更改显示折叠时的CSS：

#navbarCollapse.navbar-collapse.collapse.show #top-search-form {
padding-left: 0rem;
padding-right: 0rem; 
}

然而，似乎什么都没有改变。我相当肯定我有正确的CSS路径，因为改变边距似乎有影响，但改变它，而动画开始，所以它看起来像“跳”，因为它是折叠。无论如何，改变填充没有什么。我也尝试了一些其他的CSS方法，我不记得了我的脑海顶部。
我也尝试过使用Javascript，但它变得非常混乱，我觉得有一个简单得多的解决方案。我尝试的是添加事件侦听器，当可折叠按钮显示和隐藏时，使用classList添加/删除pe-5类。删除（），但我遇到了一个问题，当调整窗口大小时，如果按钮折叠但隐藏，它仍然被认为是“折叠的”，引导填充类仍然会被删除。然后我尝试添加一个事件侦听器来调整窗口大小，它变得非常混乱，我无法让它按预期工作，因为查找元素是否通过Flex溢出比我想象的要难得多，我想这最终会大大降低我的页面速度。
下面是我遇到的问题的一个示例：
https://jsfiddle.net/jbu812os/
只要缩小屏幕，直到折叠汉堡按钮出现，并单击它，它应该显示输入搜索框和搜索按钮没有占用整个折叠宽度。
任何帮助都将不胜感激，谢谢！