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

Question

我想让搜索文本框响应式填满整个屏幕。 我成功了，但是橙色按钮和前进 下拉菜单 在第二行。

这是我的 CSS 搜索栏代码

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

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

查看价格table

我尝试过的：

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

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

我的问题是如何使文本框全屏显示，同时输入组按钮在同一行并响应

Answer 1

使用calc计算合适的尺寸。

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

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