Auf dieser Seite:Was bewirkt, dass ein Label-Tag nicht "oben" auf einem Input-Tag steht?
http://getbootstrap.com/components/#input-groups-buttons
Wenn Sie die Go ändern! button zu einem Label (mit dem Chrome-Inspektor) werden Sie feststellen, dass das Go! Taste ist nicht mehr auf dem Eingabefeld:
(Anstelle der Grenzen einer auf dem anderen zu sein, sie nebeneinander sind.)
Warum das so ist und wie man die zwei Elemente übereinander legen?
Bootstrap gilt max-width:100% auf ein Etikett. Das verkleinert seine Begrenzungsbox (wird durchgängig angewendet) so, dass sie in ihren umschließenden Block passt (ihr übergeordnetes Zeichenelement), dessen Breite um ein Pixel reduziert wird, weil dies durch die Tatsache bestimmt wird, dass sie die Rand-Box des Go enthalten muss ! Taste/Etikett, die margin-right:-1px angewendet hat. Die Spanne ist der containing-Block der Schaltfläche/label, da seine Input-Group-btn-Klasse display:table-cell
macht. Um den gleichen Effekt mit einem Label zu erhalten, setzen Sie einfach label { max-width:none; } In der Praxis werden Sie wahrscheinlich einen spezifischeren Selektor benötigen.
ein Etikett auf der Oberseite eines Eingangs zu setzen ist nicht die beste Idee, wäre es besser, sie zu zerlegen und sie nebeneinander schwimmen. Diese Frage beantwortet here kann helfen. Dies könnte auch mit dem Z-Index im Stilteil jedes Div angepasst werden. Als Antwort auf Titel in warum dies passiert, bin ich mir nicht ganz sicher ...