Twitter Bootstrap CSS statisch-flüssige Formularpositionierung
Ich benutze das Twitter Bootstrap Framework, um ein Layout wie dieses zu erhalten:
So sieht es jetzt aus:
Die Breite des Formularbehälters ändert sich abhängig von der Breite des Browsers (CSS-Medienabfragen von Twitter Bootstrap). Die Icon-Boxen haben immer 14px Breite.
Ich habe verschiedene Dinge versucht, basierend auf CSS-Layouts mit statischer Breite, Seitenleiste und flüssigem Inhalt, um zu versuchen, die Breite der Texteingabe auszufüllen.
Ich denke, meine einzige Option besteht darin, eigene CSS-Medienabfragen zu erstellen, die eine absolute Breite für die Texteingabe definieren.
4 Antworten
Sie fügen das ganze Formular in span3 ein, es ist ungefähr 25% der Zeilenbreite. Wenn die Auflösung groß ist, reicht daher span3 nicht aus, um das ganze Formular zu enthalten. Bei kleineren Auflösungen wird die Breite von span3 zu 100% und bei kleinen Auflösungen gut. Verwenden Sie einfach eine andere Spannungsklasse, und rechnen Sie sorgfältig Zahlen in Spannungsklassen. Wie hier Ich bevorzuge auch die row-fluid-Klasse anstelle der row-Klasse. Es ist einfacher, mit width zu manipulieren.
Verwenden Sie immer eine Struktur wie diese
%Vor%Beachten Sie, dass immer, wenn ich neue Zeile im Design ohne Floating will, und wenn ich 100% der Breite Od Elternelement wollen, werde ich Zeile-Flüssigkeit verwenden. Da Kinderelemente wiederum Elemente überspannen können, ergibt sich die Summe der 12. In diesem Beispiel wird "content1" 25% der Breite in großen Auflösungen verwenden, in kleinen Auflösungen wird es jedoch 100% Breite haben. In großen Auflösungen haben "content2" und "content3" 100% der Elternbreite, aber das sind 75% der Containerbreite. In kleinen Auflösungen haben alle Spannungsklassen eine Breite von 100%. Wenn Sie das in einigen Fällen nicht möchten, überschreiben Sie einfach das Standard-Bootstrap-CSS mit Ihren Klassen.
Ich hoffe, Sie verstehen, was mein Standpunkt ist. Entschuldigung für mein Englisch:)
Wie bei vielen CSS-Frameworks müssen Sie sehr vorsichtig mit padding sein. Zieh das aus
bootstrap können Sie auch minimale Breiten für Objekte simulieren, ohne dass Sie das gesamte Layout flüssig machen müssen. In Ihrem Fall können Sie versuchen, die Wrapperspanne und die Zeile für dieses Nav nicht flüssig zu gestalten.
Tags und Links html css twitter-bootstrap