我有一个简单的导航条，主要是从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，但它变得非常混乱，我觉得有一个更简单的解决方案。我尝试添加事件监听器时，可折叠按钮被显示和隐藏，将添加/删除pe-5类使用classList.remove()，但我遇到了一个问题，当调整窗口大小，如果按钮被折叠但隐藏，它仍然被认为是"bootstrap填充类仍然会被移除。然后我尝试添加一个事件监听器窗口调整大小，它变得非常混乱，我不能让它像预期的那样工作，因为如果一个元素通过flex溢出比我想象的要困难得多，我想这最终会大大减慢我的页面速度。
这里是一个例子的问题，我有:
https://jsfiddle.net/jbu812os/
只是缩小屏幕，直到折叠汉堡包按钮出现，并单击它，它应该显示输入搜索框和搜索按钮不占用完整的折叠宽度。
任何帮助都将非常感激，谢谢!
尝试添加这两个jQuery事件处理程序:
$('#navbarCollapse').on('show.bs.collapse', function() {
$('#top-search-form').removeClass('pe-5')
})
$('#navbarCollapse').on('hidden.bs.collapse', function() {
$('#top-search-form').addClass('pe-5')
})
我正在使用内置的Bootstrap事件，他们似乎工作。对于调整大小的问题，您仍然可以使用窗口。调整大小事件。像这样:
$(window).resize(function() {
if($(window).width > 300) {
$('#navbarCollapse').collapse('hide')
}
})
这将强制你的折叠组件隐藏当你的屏幕尺寸大于300px。