javascript - Bootstrap : Search Icon Button Inside Input Box separates from Inputbox at non-desktop Resolution

Question

我正在尝试在搜索输入框中放置一个搜索图标按钮(使用 Bootstrap)

虽然在桌面分辨率下一切正常，但在非桌面分辨率下，当菜单项合并到下拉列表中时，按钮和输入框会出现两个极端。

像这样:http://prntscr.com/4m31c7

我已经解决了这个问题:http://www.bootply.com/G7TudgkXPA

如何让按钮和输入框一直保持在一起？ (同样重要的是，搜索框要居中对齐:它不能向左或向右)

Answer 1

为什么不让它成为 100% 宽度。这样它应该在两种情况下都能到达另一个元素。

input#srch-term {
background: none;
border: 2px solid white;
border-top-left-radius: 1.5em;
border-bottom-left-radius: 1.5em;
  width:100%
}

http://www.bootply.com/TzVC7Ww2fl#