Není respektována velikost vstupu do bootstrapu

Například: At / user / login jak pole pro uživatelské jméno, tak i heslo obsahují atribut HTML size = „60“.

V Bartiku mají pole pevnou šířku.

V Bootstrapu , pole jsou natažena tak, aby vyplnila celou šířku obrazovky.

Požadované chování: chtěl bych přimět Bootstrap k dodržování atributu size – on / user / login a na každé další stránce na webu. Nejsem schopen vygenerovat seznam všech ovlivněných stránek, protože jich je mnoho a časem se to změní.

Zdá se, že něco v Bootstrap SCSS kazí šířky vstupních polí. Chtěl bych to něco smazat nebo přepsat. Dosud se mi však nepodařilo zjistit, jak to udělat.

Dosud jsem našel: Na Drupal.org již existuje problém, kde říká markcarver správce modulu

Důvod, proč se „roztažili“ na celou šířku, je ten, že oba mají třídu řízení formulářů. Toto je součást designu Bootstrapu a nebudu s tím bojovat out-of-the-box. Existuje několik způsobů, jak změnit tento formulář, jak uznáte za vhodné, v podtématu.

Co částečně funguje, ale ne 100% správně: Bylo by možné napsat CSS a nastavit novou šířku na všechny vstupy s třídou form-control typu textu. To je dobré, ale nastaví šířku na pevnou hodnotu, například 15em. Chtěl bych získat zpět původní šířku, která se bude u každého vstupu lišit.

Komentáře

  • Zajímalo by mě, proč don ' jednoduše to opravíte pomocí CSS ???
  • @leymannx jsem to objasnil, viz " EDIT 2 ". Ano, očekávám, že to opravím pomocí CSS, ale hledám jedinou změnu, která pokryje všechna pole. Pokud víte, jak to udělat, pošlete prosím komentář / komentář.
  • Pokud osoba, která hlasovala proti, mohla vysvětlit, proč, pak bych se možná mohla něco naučit a v budoucnu klást lepší otázky
  • Didn ' t proti, ale myslím, že se to stalo, protože se skutečně ptáte na příliš širokou otázku a nezvýrazňujete nic, co jste udělali sami zatím tento problém vyřešit sami. Kromě toho, když to můžete opravit pomocí CSS a zeptat se nás, jak to udělat, pak je tato otázka také mimo téma. Nebudeme vás ' naučit, jak vytvořit dílčí téma, a nebudeme vás ' naučit psát robustní CSS. Tam už jsou stovky tutoriálů, které to pokrývají. Hodně štěstí! 🙂
  • @leymannx Díky. Ve skutečnosti kladu velmi konkrétní otázku, ale myslím, že jsem ji vysvětlil špatně. ' zkusím ještě jednu úpravu. Možná bych však měl pouze smazat otázku, protože způsobuje zmatek.

Odpověď

Standardní způsob opravy toto je použít css ve vašem dílčím tématu založeném na Bootstrapu. Pro přihlašovací pole pro uživatelské jméno a heslo:

#edit-name, #edit-pass { width: 15em; } 

Upozornění: hledám řešení, které pokrývá všechny forma vstupu, nejen přihlášení uživatele jako zvláštní případ.

Tuto metodu (css) můžete použít pro každé pole pro zadávání textu, které chcete přepsat. Bootstrap je výchozí chování. Je zřejmé, že pro pole, které chcete přepsat, musíte použít správný selektor css.

Komentáře

  • Děkujeme, že jste si našli čas na odpověď. Přečtěte si můj " EDIT 2 " – doufám, že nebudu muset identifikovat každé jednotlivé pole, které by mohlo být případ od případu ovlivněno protože to není praktické ani udržovatelné
  • vstup a cíl pomocí třídy ovládání formuláře typu text?
  • @kevin, omlouvám se, ale nerozumím otázce.
  • namísto použití ID můžete cílit pouze na vstupy s touto třídou, které jsou typu ' text '.
  • @Kevin díky, ano, to je spíš to, v co jsem doufal. Zdá se však, že bych stále uvízl s pevnou šířkou jako 15em. Raději bych ponechal skutečnou šířku uvedenou v #size. Chtěl bych " vrátit " cokoli, co Bootstrap udělal, aby přepsal šířky, a vyzvednout přesně stejnou šířku, jaká se vyskytuje v Bartiku.

Odpověď

Doufal jsem v odpověď od odborníka a přesto bych ji uvítal – rád bych nastavit přijmout místo mého odpověď jinou odpověď.

Tady je můj zatím nejlepší pokus. Zdá se, že to funguje pro přihlašovací stránku a blok vyhledávání. Stále mám ale pocit, že bojuji se systémem, který nepoužívám “ plně nerozumím.

.form-control, .input-group .form-control, .input-group-btn { width: auto; } 

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *