如何使文本框以正确的方式响应？

Question

我想让搜索文本框响应式地填满整个屏幕。 我让它工作，但橙色按钮和高级 下拉菜单 在第二行。

这是我的搜索栏 CSS 代码

.form-group.footable-filtering-search {
  width: 100%;
}
.footable .input-group-btn {
  display: block;
}

这是页面https://www.test.com/

查看价格表

我尝试过的：

我尝试将 width:80% 和 input-group-btn 的文本框设置为 flex。

但它完全消失了。 我也试过包含同样的东西。

我的问题是如何让文本框全屏显示而 input-group-btn 在同一行并且响应式

Answer 1

使用calc 计算正确的大小。

.form-group.footable-filtering-search {
  width: calc(100% - 74px);
}

74px 是按钮大小的总和。如果你改变它，你已经更新了这个。