是什么让标签标签无法在＃34;顶部＆＃34;输入标记？

Question

在此页面中：

http://getbootstrap.com/components/#input-groups-buttons

如果你改变Go！ button到标签（使用Chrome检查员），您会注意到Go！按钮不再位于输入字段的顶部：

（而不是边界是一个在另一个上面，它们是并排的。）

为什么会这样，以及如何使两个元素成为另一个元素？

Answer 1

Bootstrap将max-width:100%应用于标签。缩小其边框（box-sizing:border-box在整个范围内应用），使其适合其包含的块（其父级span元素），其宽度减少一个像素，因为这是由它必须包含边距的事实决定的Go的盒子！已应用margin-right:-1px的按钮/标签。 span是包含块的按钮/标签，因为它的input-group-btn类使它成为display:table-cell

因此，为了获得与标签相同的效果，只需设置label { max-width:none; }在实践中，您可能需要更具体的选择器。

Answer 2

在输入的顶部放置一个标签并不是最好的主意，最好将它们分开并让它们彼此相邻。回答here这个问题可能有所帮助。这也可以使用每个div的样式部分中的z-index进行调整。至于回答你为什么会发生这种情况的标题，我并不完全确定......