Beispiel: Bei / user / login enthalten sowohl die Eingabefelder für den Benutzernamen als auch für das Kennwort eine HTML-Attributgröße = „60“.
In Bartik haben die Felder eine feste Breite.
In Bootstrap werden die Felder gestreckt, um die gesamte Bildschirmbreite auszufüllen.
Angefordertes Verhalten: Ich möchte Lassen Sie Bootstrap dem Größenattribut folgen – on / user / login und auf jeder einzelnen anderen Seite der Website. Ich kann keine Liste aller betroffenen Seiten erstellen, da es viele gibt, die sich im Laufe der Zeit ändern werden.
Es scheint, dass etwas in Bootstrap SCSS die Breite der Eingabefelder durcheinander bringt. Ich möchte das etwas löschen oder überschreiben. Ich habe es jedoch noch nicht geschafft, herauszufinden, wie das geht.
Was ich bisher gefunden habe: Auf Drupal.org gibt es bereits ein -Problem, bei dem der Markcarver des Modulbetreuers
Der Grund, warum sie in voller Breite „gestreckt“ werden, ist, dass sie beide eine Form-Control-Klasse haben. Dies ist Teil des Bootstrap-Designs und ich werde das nicht sofort bekämpfen. Es gibt verschiedene Möglichkeiten, dieses Formular in einem Unterthema nach Belieben zu ändern.
Was teilweise funktioniert, aber nicht zu 100% richtig: Es wäre möglich, CSS zu schreiben, um eine neue Breite für alle Eingaben mit einer Formularkontrollklasse vom Typ Text festzulegen. Das ist gut, aber es setzt die Breite auf einen festen Wert wie 15em. Ich möchte die ursprüngliche Breite zurückerhalten, die bei jeder Eingabe unterschiedlich ist.
Kommentare
- Ich frage mich, warum nicht ' Wenn Sie dies nicht einfach mit CSS beheben ???
- @leymannx Ich habe klargestellt, siehe " EDIT 2 ". Ja, ich erwarte, das Problem mit CSS zu beheben, aber ich suche nach einer einzigen Änderung, die alle Bereiche abdeckt. Wenn Sie wissen, wie das geht, posten / kommentieren Sie bitte.
- Wenn die Person, die abgelehnt hat, erklären könnte, warum, dann könnte ich vielleicht etwas lernen und in Zukunft bessere Fragen stellen.
- Didn ' t downvote, aber ich denke, es ist passiert, weil Sie tatsächlich eine zu breite Frage stellen und ' nichts hervorheben, was Sie selbst getan haben Bisher, um dieses Problem selbst zu beheben. Abgesehen davon, wenn Sie es mit CSS beheben und uns fragen können, wie das geht, ist diese Frage auch nicht zum Thema. ' bringt Ihnen nicht bei, wie man ein Unterthema erstellt, und ' bringt Ihnen nicht bei, wie man robustes CSS schreibt. Es gibt bereits Hunderte von Tutorials, die dies abdecken. Viel Glück! 🙂
- @leymannx Danke. Tatsächlich stelle ich eine sehr spezifische Frage, aber ich glaube, ich habe sie schlecht erklärt. Ich ' werde noch eine Bearbeitung versuchen. Aber vielleicht sollte ich die Frage einfach löschen, da sie Verwirrung stiftet.
Antwort
Die Standardmethode zur Behebung Dies dient zur Verwendung von CSS in Ihrem Bootstrap-basierten Unterthema. Für die Anmeldefelder für Benutzername und Passwort:
#edit-name, #edit-pass { width: 15em; } NB Ich suche nach einer Lösung, die alle Bereiche abdeckt Eingabeform, nicht nur Benutzeranmeldung als Sonderfall.
Sie können diese Methode (css) für jedes Texteingabefeld verwenden, das Sie überschreiben möchten Das Standardverhalten von Bootstrap. Natürlich müssen Sie den richtigen CSS-Selektor für das Feld verwenden, das Sie überschreiben möchten.
Kommentare
- Vielen Dank, dass Sie sich die Zeit genommen haben, um zu antworten. Bitte lesen Sie meine " EDIT 2 " – Ich hoffe, dass ich nicht jedes einzelne Feld identifizieren muss, das von Fall zu Fall betroffen sein könnte Da dies nicht praktikabel oder wartbar ist
- Eingabe und Ziel durch Formularsteuerungsklasse vom Typ Text?
- @kevin, sorry, aber ich verstehe die Frage nicht.
- Anstatt IDs zu verwenden, können Sie auch Eingaben mit dieser Klasse als Ziel festlegen, die vom Typ ' text ' sind.
- @ Kevin danke, ja das ist eher das, was ich mir erhofft hatte. Es scheint jedoch, dass ich immer noch mit einer festen Breite wie 15em stecken bleiben würde. Ich würde es vorziehen, die in #size angegebene tatsächliche Breite beizubehalten. Ich möchte " " rückgängig machen, was auch immer Bootstrap getan hat, um die Breiten zu überschreiben, und genau die Breite übernehmen, die in Bartik auftritt.
Antwort
Ich hatte auf eine Antwort von und einem Experten gehofft und würde das immer noch begrüßen – ich würde mich freuen Ich akzeptiere eine andere Antwort anstelle meiner.
Hier ist mein bisher bester Versuch. Es scheint für die Anmeldeseite und den Suchblock zu funktionieren. Ich habe jedoch immer noch das Gefühl, dass ich gegen ein System kämpfe, das ich nicht habe. Ich verstehe es nicht vollständig.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }