引导输入附加+谷歌地图表单

Question

我正在尝试一个块级的输入附加，其中输入栏占据了除按钮之外的所有空间。

我用<button>或<span>实现了这一点，但当我将标记切换到<input>时，我又开始出现样式问题。但是，<input>标签是必需的。

我有一个Fiddle-HERE

Answer 1

我通过这样做让它工作起来：

.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: auto !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}​

1. 我删除了嵌套的选择器，因为在常规CSS中无法做到这一点。(不过，使用Sass和LESS可以)
2. 我在".addon"选择器中添加了"height:auto！important"。尽管通常认为使用"！important"不是最佳做法
3. 我在58像素的井上添加了填充，这是GO的宽度！按钮，39像素，加上19像素的填充

编辑：正如@nicefinly所指出的，GO的高度！按钮仍然关闭。在Chrome浏览器中，我并没有看到任何错误，但在Firefox中，我可以肯定地看到高度问题。

因此，在他的所有更改中，我还想补充一点，例如，当修改well和附加类时，这将改变所有使用这些标准Bootstrap类的地方，这可能不是你想要的。

相反，我会为所有这些自定义类创建单独的类，这样它们就可以在这个特定的情况下工作，而在其他情况下也可以按预期工作。例如，"添加按钮"、"带按钮的井"等

Answer 2

@CoderDave用他的建议为我指明了正确的方向——@CoderDev的答案的JSFiddle

然而，我注意到高度有点偏离。相反，我手动设置了按钮高度-我的变通方法的JSFiddle

.input-append {
display: table;
width: 100%;
}
.add-on {
display: table-cell;
height: 30px !important;
}
.input-bar {
display: table-cell;
width: 100%;
border-right-style: None;
}
.well{
padding-right: 58px;
}
​

但是

Chrome中的测试给了我奇怪的结果(不一定是偶然的，但在我的本地环境中)。因此，我没有使用填充，而是使用了margin-left和margin-right，其中

input .add-on上的margin-left = 17px

和

.input-bar上的margin-right = -55px

但是之后，我注意到z索引导致.input-bar屏蔽GO！按钮(即我点击了它)。

因此，我设置了z-index

well的z-index: -1z-index: 1用于.input-bar.add-on的z-index: 2

此处为最终JSFIDDLE

这似乎是一个相当棘手的解决方案。如果有人有更好的解决方案，请分享。