Html 响应下拉菜单在双栏视图中未正确打开

基本上，我正在使用过滤器来过滤表内容。我有四个过滤器要处理。当我使用引导时，它们响应迅速。但当我将浏览器窗口的宽度调整到75%时，两列视图就会跳入。在两列视图中，除第一个（产品）外，所有下拉列表都工作正常。当我打开第一个下拉列表并关闭所有其他下拉列表时，所有下拉列表都会移动到过滤器1的右侧。我希望产品下拉列表的行为类似于观众下拉列表

函数showFilter（过滤器）{
var x=document.getElementById（filter.parentNode.childNodes[3].id）；
如果（x.style.display=='none'）{
x、 style.display='block'；
}否则{
x、 style.display='none'；
}
}

.filter按钮{
宽度：100%；
背景色：#005387；
-webkit边界半径：0px；
-moz边界半径：0px；
边界半径：0px；
垂直对齐：底部对齐；
}
.过滤器菜单{
宽度：100%；
高度：110px；
溢出：自动；
-网络工具包盒阴影：0px 0px 0px 0px rgba（0,0,0,0）；
-moz盒阴影：0px 0px 0px 0px rgba（0,0,0,0）；
盒影：0px 0px 0px 0px rgba（0,0,0,0）；
-webkit边界半径：0px；
-moz边界半径：0px；
边界半径：0px；
填充：10px；
边框：1px实心#ddd；
}
/*将过滤器开关连接到过滤器盒的顶部*/
#产品筛选器、#语言筛选器、#媒体筛选器{
垂直对齐：顶部；
}
/*筛选菜单项*/
.过滤器菜单输入{
垂直对齐：顶部；
}
.过滤器标签{
字体大小：正常！重要；
左边距：10px；
边缘底部：7px；
}
.过滤器标签：在{
字体大小：正常！重要；
}
.过滤箱{
左侧填充：500px！重要；
}
.filter菜单li{
列表样式类型：无；
}
.筛选父项{
保证金：0；
}

引导示例
产品


观众


交付方式


语言文字

这是因为div是浮动的

一个快速的解决办法是清除第三个div

@media (min-width: 768px) {
    #mediumFilters {
      clear: left;
    }
}

---

最后我找到了解决我问题的办法

@media (max-width: 991px) {
    #medium-filters {
      clear: left;
    }
}