Például: At / user / login mind a felhasználónév, mind a jelszó beviteli mezők tartalmazzák a HTML = attribútum = 60 értéket.
A Bartikban a mezők fix szélességűek.
A Bootstrap alkalmazásban , a mezők kinyújtódnak, hogy kitöltsék a képernyő teljes szélességét.
Kért viselkedés: Szeretném tegye a Bootstrap-ot a size attribútum betartására – on / user / login, és a weboldal minden egyes más oldalán. Nem tudom létrehozni az összes érintett oldal listáját, mivel sok van, és ez az idő múlásával változni fog.
Úgy tűnik, hogy valami a Bootstrap SCSS-ben elrontja a beviteli mezők szélességét. Szeretném törölni azt a valamit, vagy felülbírálni. Ennek ellenére még nem sikerült kidolgoznom ennek a módját.
Amit eddig találtam: Már van egy probléma a Drupal.org webhelyen , ahol a modult karbantartó markcarver mondja:
Azért “teljes mértékben” kinyújtják “az egészet, hogy mindkettőjüknek van formavezérlő osztálya. Ez része a Bootstrap tervezésének, és nem fogok harcolni ezzel a dobozon kívül. Többféle módon módosíthatja ezt az űrlapot tetszés szerint egy altémában.
Ami részben működik, de nem 100% -ban helyes: Lehetséges lenne CSS-t írni úgy, hogy új szélességet állítson be az összes bemenetre, a szöveges formavezérlés osztályával. Ez jó, de a szélességet rögzített értékre állítja, például 15em. Szeretném visszakapni az eredeti szélességet, amely az egyes bemeneteknél eltérő lesz.
Hozzászólások
- Kíváncsi vagyok, miért ne ' t egyszerűen kijavítja ezt CSS-sel ???
- @leymannx, amelyet tisztáztam, lásd: " EDIT 2 ". Igen, azt remélem, hogy kijavítom CSS-sel, de egyetlen változást keresek, amely lefedi az összes mezőt. Ha tudod, hogyan kell ezt csinálni, kérlek írj / kommentelj.
- Ha az a személy, aki leszavazta, magyarázza el, miért, akkor talán tanulhatnék valamit és jobb kérdéseket tehetnék fel a jövőben
- Nem ' t visszavonja, de azt hiszem, azért történt, mert valóban túl széles kérdést tesz fel, és nem emel ki ' semmit, amit maga tett eddig egyedül megoldani ezt a problémát. Ettől eltekintve, amikor kijavíthatja a CSS-t, és megkérdezheti tőlünk, hogyan kell ezt megtenni, akkor ez a kérdés szintén nem téma. Nem fogjuk megtanítani, hogy ' megtanítsunk-e altémát, és ' nem tanítjuk meg, hogyan kell robusztus CSS-t írni. Már több száz oktatóanyag van odakint. Sok szerencsét! 🙂
- @leymannx Köszönöm. Valójában nagyon konkrét kérdést teszek fel, de azt hiszem, rosszul magyaráztam. Kipróbálok még egy szerkesztést '. De talán csak törölnöm kellene a kérdést, mivel zavart okoz.
Válasz
A javítás szokásos módja ez a css használata a Bootstrap-alapú altémában. A felhasználónév és jelszó bejelentkezési mezőknél:
#edit-name, #edit-pass { width: 15em; } NB I “olyan megoldást keresek, amely minden a beviteli forma, nem csak a felhasználói bejelentkezés, mint speciális eset.
Ezt a módszert (css) használhatja minden olyan szövegbeviteli mezőnél, amelyet felül kíván írni. A Bootstrap alapértelmezett viselkedése. Nyilvánvaló, hogy a megfelelő css-választót kell használni a felülírni kívánt mezőhöz.
Megjegyzések
- Köszönjük, hogy időt szán a válaszra. Kérjük, olvassa el a " SZERKESZTÉS 2 " című cikkemet – Remélem, hogy nem kell minden egyes mezőt azonosítanom, amely esetenként érintett lehet mivel ez nem praktikus vagy karbantartható
- bevitel és célzás a típusú szöveg formavezérlő osztályai szerint?
- @kevin, sajnálom, de nem értem a kérdést.
- használatazonosítók helyett csak megcélozhatja az adott osztályú bemeneteket, amelyek ' text ' típusúak.
- @Kevin köszönöm, igen, ez inkább hasonlít arra, amiben reménykedtem. Úgy tűnik azonban, hogy továbbra is ragaszkodnék egy fix szélességhez, például 15em-hez. Legszívesebben megtartanám a # méretben megadott tényleges szélességet. Szeretném " visszavonni " bármit, amit a Bootstrap tett, hogy felülírja a szélességeket, és pontosan ugyanolyan szélességet vegyen fel, mint ami a Bartikban található.
Válasz
Reméltem választ és szakértőt, és továbbra is örömmel fogadnám – szívesen állítson be egy másik válasz elfogadását az enyém helyett.
Itt az eddigi legjobb próbálkozásom. Úgy tűnik, hogy ez a bejelentkezési oldal és a keresési blokk számára működik. Mégis úgy érzem, hogy “egy olyan rendszerrel harcolok, amivel nem” ne értsd teljesen.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }