For eksempel: At / user / login inneholder både brukernavn og passordinntastingsfelt et HTML-attributtstørrelse = «60».
I Bartik har feltene en fast bredde.
I Bootstrap , strekkes feltene for å fylle hele skjermbredden.
Forespurt oppførsel: Jeg vil gjerne få Bootstrap til å adlyde størrelsesattributtet – på / bruker / pålogging, og på hver eneste side på nettstedet. Jeg er ikke i stand til å generere en liste over alle de berørte sidene, da det er mange, og det vil endres over tid.
Det ser ut til at noe i Bootstrap SCSS ødelegger bredden på inndatafeltet. Jeg vil gjerne slette det eller overstyre det. Jeg klarte imidlertid ikke å finne ut hvordan jeg gjør det.
Det jeg har funnet så langt: Det er allerede et -problem på Drupal.org , der modulvedlikeholder markcarver sier
Årsaken til at de «strakte» seg i full bredde er at de begge har en formkontrollklasse. Dette er en del av Bootstraps design, og jeg kommer ikke til å bekjempe det utenom boksen. Det er flere måter å endre dette skjemaet etter eget ønske, i et undertema.
Det som delvis fungerer, men ikke 100% riktig: Det ville være mulig å skrive CSS for å angi en ny bredde på alle innganger med formkontrollklasse av type tekst. Det er bra, men den setter bredden til en fast verdi som 15em. Jeg vil gjerne få tilbake den opprinnelige bredden, som vil være forskjellig på hver inngang.
Kommentarer
- Jeg lurer på hvorfor ikke ' t rett og slett fikser du dette med CSS ???
- @leymannx har jeg avklart, se " EDIT 2 ". Ja, jeg forventer å fikse det med CSS, men jeg ser etter en enkelt endring som dekker alle felt. Hvis du vet hvordan du gjør det, kan du poste / kommentere.
- Hvis personen som ikke stemte, kan forklare hvorfor, kan jeg kanskje lære noe og stille bedre spørsmål i fremtiden
- Visste ikke ' t downvote, men jeg antar at det skjedde fordi du faktisk stiller et altfor bredt spørsmål og ikke ' t fremhever alt du selv har gjort så langt for å fikse dette problemet på egen hånd. Bortsett fra det, når du kan fikse det med CSS og spørre oss hvordan du gjør det, er dette spørsmålet også utenfor emnet. Vi vil ikke ' ikke lære deg hvordan du lager et undertema, og vi vil ikke ' ikke lære deg hvordan du skriver robust CSS. Det er allerede hundrevis av opplæringer der ute som dekker det. Lykke til! 🙂
- @leymannx Takk. Jeg stiller faktisk et veldig spesifikt spørsmål, men jeg antar at jeg har forklart det dårlig. Jeg ' Jeg prøver en redigering til. Men kanskje jeg bare burde slette spørsmålet ettersom det forårsaker forvirring.
Svar
Standard måte å fikse på dette er å bruke css i ditt Bootstrap-baserte undertema. For påloggingsfeltene for brukernavn og passord:
#edit-name, #edit-pass { width: 15em; } NB Jeg ser etter en løsning som dekker alle form for inndata, ikke bare brukerinnlogging som et spesielt tilfelle.
Du kan bruke denne metoden (css) for hvert tekstinntastingsfelt der du vil overstyre Bootstraps standard oppførsel. Åpenbart må du bruke riktig css-velger for feltet du vil overstyre.
Kommentarer
- Takk for at du tok deg tid til å svare. Vennligst se min " EDIT 2 " – Jeg håper å unngå å måtte identifisere hvert enkelt felt som kan bli berørt fra sak til sak da det ikke er praktisk eller vedlikeholdbart
- input og mål etter formkontrollklasse av type tekst?
- @kevin, beklager, men jeg forstår ikke spørsmålet.
- i stedet for å bruke ID-er, kan du bare målrette innganger med den klassen, som er av typen ' tekst '.
- @Kevin takk, ja det ligner mer på det jeg håpet på. Imidlertid ser det ut til at jeg fortsatt vil sitte fast med en fast bredde som 15em. Jeg foretrekker å beholde den faktiske bredden som er spesifisert i # størrelse. Jeg vil " angre " hva Bootstrap gjorde for å overstyre breddene, og plukke opp nøyaktig samme bredde som forekommer i Bartik.
Svar
Jeg hadde håpet på et svar fra og ekspert og vil fortsatt ønske det – jeg vil gjerne sett godta et annet svar i stedet for mitt.
Her er mitt beste forsøk så langt. Det ser ut til å fungere for påloggingssiden og søkeblokken. Jeg føler meg likevel som om jeg kjemper mot et system jeg ikke har. ikke forstå det fullt.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }