我有一个简单的导航栏，大部分是从Bootstrap的导航栏教程中复制过来的. 基本上，我使用Bootstrap类"pe-5"来填充表单(我使用pe-5只是为了更好地演示这一点，如果我可以修复它，我可能会减少它)，所以它与导航栏的右侧对齐，与屏幕边缘留出一些空间，并在表单灵活包装时出现一个可折叠的按钮(请原谅我的词汇表，因为我对WebDev和Bootstrap(以及Flexbox)都不熟悉).但是，当按钮折叠时(所以当我收缩窗口直到按钮出现，然后单击折叠按钮时)，填充仍然在表单输入和搜索按钮上，它看起来很奇怪和关闭.
有什么方法可以更改折叠项目的css吗？我try 了很多方法，包括更改显示折叠时的css:
#navbarCollapse.navbar-collapse.collapse.show #top-search-form {
padding-left: 0rem;
padding-right: 0rem;
}
然而，一切似乎都没有改变.我相当肯定我的css路径是正确的，因为更改页边距似乎有效果，但在动画开始时更改了它，所以它看起来像是在折叠时" skip ".无论如何，更改填充不会产生任何影响.我还try 了其他几种我想不起来的css方法.
我也试过使用Java脚本，但它变得非常混乱，我觉得有一个简单得多的解决方案.我try 的是为可折叠按钮何时显示和隐藏添加事件侦听器，并将使用ClassList.Remove()添加/删除pe-5类，但我遇到了一个问题，在调整窗口大小时，如果按钮折叠但隐藏，它仍然被认为是"折叠的"，并且 bootstrap 填充类仍然会被删除.然后，我try 向窗口调整大小添加一个事件侦听器，它变得非常混乱，我无法让它像预期的那样工作，因为查找一个元素是否通过flex溢出比我想象的要难得多，我认为这会显著降低页面的速度.
Here is an example of the issue I am having:
https://jsfiddle.net/jbu812os/
Just shrink the screen until the collapse hamburger button appears and click it and it should show that the input search box and search button are not taking up the full collapse width.
Any help would be GREATLY appreciated, thank you!