Ich habe ein Bootstrap 3.3.7-Projekt, das über eine Suchfunktion verfügt, die aus drei Texteingabefeldern besteht.Bootstrap - Formularelemente ungleicher Breite, die eine volle Zeile belegen
Die 3 Eingänge werden innerhalb .col-md-4 so platziert, dass sie die volle Breite des Bildschirms einnehmen. Beispiel hier: https://jsfiddle.net/8vm8m8za/6/
Ich habe eine Anforderung, einen Knopf auf der rechten Seite (nach "Feld 3" im Beispiel oben) zu setzen. Der Text auf dieser Schaltfläche ist ein einzelnes Zeichen ("A") und daher nimmt die Schaltfläche nicht viel Breite ein. Ich habe die Geige aktualisiert, um zu zeigen, wie sie aussieht: https://jsfiddle.net/8vm8m8za/7/. Um diese Arbeit ich .col-md-4 zu .col-md-3 geändert, wie ich verstehe, dass sie hinzufügen müssen bis zu 12, um die volle Breite des .row
nehmen Die Wirkung I will zwischen den 2 Beispiel Links, die ich geschrieben. Ich möchte, dass die 3 Texteingaben die ganze Breite einnehmen, aber auch die Schaltfläche in der gleichen Zeile enthalten und "adjust" (weiß nicht, wie ich es sonst beschreiben soll) die Breite so, dass alles genau in 1 .row passt.
Ich kann nicht verstehen, wie man dies mit Bootstrap zu implementieren, da ich glaube, dass alles bis zu 12 addiert werden muss, damit es die ganze Reihe aufnehmen kann.
Verwendung Input-Gruppe-Addon auf dem letzten Eingabefeld. –
Es ist nicht zwingend erforderlich, dass alles zusammen 12 ergibt, Sie können alles unter 12 verwenden und die Elemente werden in einer Reihe ausgerichtet. Wenn die Werte über 12 gehen, wird die nächste Zeile genommen. –
ist das was Sie suchen https://jsfiddle.net/DChandraShekhar/8vm8m8za/8/ –