De exemplu: At / user / login atât câmpurile de introducere a numelui de utilizator cât și a parolei includ un atribut HTML size = „60”.
În Bartik, câmpurile au o lățime fixă.
În Bootstrap , câmpurile sunt întinse pentru a umple întreaga lățime a ecranului.
Comportament solicitat: Aș dori să faceți ca Bootstrap să respecte atributul size – on / user / login și pe fiecare altă pagină a site-ului web. Nu pot genera o listă cu toate paginile afectate, deoarece sunt multe și se va schimba în timp.
Se pare că ceva din Bootstrap SCSS încurcă lățimile câmpurilor de intrare. Aș dori să șterg acel ceva sau să îl înlocuiesc. Totuși, încă nu am reușit să aflu cum să fac asta.
Ce am găsit până acum: Există deja o problemă pe Drupal.org , în care menționatorul de module markcarver spune
Motivul pentru care s-au „întins” pe toată lățimea este că amândoi au o clasă de control al formularului. Aceasta face parte din proiectarea Bootstrap și nu voi lupta împotriva acelei funcții. Există mai multe moduri de a modifica acest formular după cum doriți, într-o subtemă.
Ceea ce funcționează parțial, dar nu 100% corect: Ar fi posibil să scrieți CSS pentru a seta o lățime nouă pentru toate intrările cu clasa de control a formularului de tip text. Este bine, dar setează lățimea la o valoare fixă, cum ar fi 15em. Aș dori să recuperez lățimea inițială, care va fi diferită la fiecare intrare.
Comentarii
- Mă întreb de ce nu ' pur și simplu remediați asta cu CSS ???
- @leymannx l-am clarificat, consultați " EDITARE 2 ". Da, mă aștept să o rezolv cu CSS, dar caut o singură modificare care să acopere toate câmpurile. Dacă știți cum să faceți acest lucru, vă rugăm să postați / comentați.
- Dacă persoana care a votat în jos ar putea explica de ce, atunci aș putea învăța ceva și a putea pune întrebări mai bune pe viitor
- Nu ' nu votați în jos, dar cred că s-a întâmplat deoarece într-adevăr puneți o întrebare prea largă și nu ' nu evidențiați nimic din ceea ce ați făcut dvs. până acum pentru a remedia această problemă pe cont propriu. În afară de asta, atunci când îl puteți remedia cu CSS și ne puteți întreba cum să facem acest lucru, atunci și această întrebare nu are obiect ' nu te-am învățat cum să creezi o subtemă și nu am câștigat ' să te învățăm cum să scrii CSS robust. Există deja sute de tutoriale care acoperă asta. Mult noroc! 🙂
- @leymannx Mulțumesc. De fapt, pun o întrebare foarte specifică, dar cred că am explicat-o prost. ' voi mai încerca o editare. Dar poate ar trebui să șterg întrebarea, deoarece provoacă confuzie.
Răspuns
Modul standard de a remedia aceasta este să utilizați css în sub-tema dvs. bazată pe Bootstrap. Pentru câmpurile de autentificare cu numele de utilizator și parola:
#edit-name, #edit-pass { width: 15em; } NB Căut o soluție care să acopere toate formă de intrare, nu doar autentificarea utilizatorului ca un caz special.
Puteți utiliza această metodă (css) pentru fiecare câmp de introducere a textului în care doriți să suprascrieți Comportamentul implicit al Bootstrap-ului. Evident, trebuie să utilizați selectorul css potrivit pentru câmpul pe care doriți să îl suprascrieți.
Comentarii
- Vă mulțumim că ați luat timp să răspundeți. Vă rugăm să consultați " EDITUL 2 " – Sper să evit să trebuiască să identificați fiecare câmp care ar putea fi afectat de la caz la caz întrucât acest lucru nu este practic sau nu poate fi întreținut
- introducerea și vizarea în funcție de clasa de control a formularului de tip text?
- @kevin, îmi pare rău, dar nu înțeleg întrebarea.
- în loc să utilizați ID-uri, puteți viza doar intrări cu acea clasă, care sunt de tip ' text '.
- @Kevin mulțumesc, da, asta seamănă mai mult cu ceea ce speram. Cu toate acestea, se pare că aș rămâne blocat cu o lățime fixă de 15em. Aș prefera să păstrez lățimea reală specificată în #size. Aș dori să " anulați " orice a făcut Bootstrap pentru a înlocui lățimile și a prelua exact aceeași lățime care apare în Bartik.
Răspuns
Sperasem la un răspuns de la și expert și aș continua cu plăcere că – aș fi fericit să set acceptă un alt răspuns în loc de al meu.
Iată cea mai bună încercare a mea de până acum. Se pare că funcționează pentru pagina de conectare și blocul de căutare. Cu toate acestea, încă simt că „lupt împotriva unui sistem pe care nu-l fac” Înțelegeți pe deplin.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }