Till exempel: Vid / användare / inloggning inkluderar både användarnamn och lösenordsfält en HTML-attributstorlek = ”60”.
I Bartik har fälten en fast bredd.
I Bootstrap , sträcks fälten för att fylla hela skärmbredden.
Begärt beteende: Jag vill få Bootstrap att följa attributet storlek – på / användare / inloggning och på alla andra sidor på webbplatsen. Jag kan inte skapa en lista över alla berörda sidor eftersom det finns många och det kommer att förändras med tiden.
Det verkar som om något i Bootstrap SCSS förstör bredden på inmatningsfält. Jag vill ta bort det där eller åsidosätta det. Men jag lyckades ännu inte ta reda på hur jag gör det.
Vad jag hittills hittat: Det finns redan ett -problem på Drupal.org , där modulhållarens markcarver säger
Anledningen till att de ”sträckte sig” i full bredd är att de båda har en formkontrollklass. Detta är en del av Bootstraps design och jag kommer inte att bekämpa det direkt. Det finns flera sätt att ändra det här formuläret enligt önskemål i ett undertema.
Vad som delvis fungerar men inte 100% rätt: Det skulle vara möjligt att skriva CSS för att ställa in en ny bredd på alla ingångar med formkontrollklass av typtext. Det är bra, men det sätter bredden till ett fast värde som 15em. Jag skulle vilja få tillbaka originalbredden, som kommer att vara olika för varje ingång.
Kommentarer
- Jag undrar varför inte ' t fixar du det helt enkelt med CSS ???
- @leymannx Jag har klargjort, se " EDIT 2 ". Ja, jag förväntar mig att fixa det med CSS, men jag letar efter en enda förändring som täcker alla fält. Skicka / kommentera om du vet hur du gör det.
- Om personen som nedröstade skulle kunna förklara varför skulle jag kanske kunna lära mig något och ställa bättre frågor i framtiden
- ' t downvote, men jag antar att det hände för att du faktiskt ställer en alltför bred fråga och inte ' t markerar allt du själv har gjort hittills för att åtgärda problemet på egen hand. Bortsett från det, när du kan fixa det med CSS och fråga oss hur man gör det, är denna fråga också utanför ämnet. Vi kommer inte att ' lära dig hur du skapar ett undertema och vi kommer inte att lära dig ' t hur du skriver robust CSS. Det finns redan hundratals självstudier som täcker det. Lycka till! 🙂
- @leymannx Tack. Jag ställer faktiskt en mycket specifik fråga, men jag antar att jag har förklarat det dåligt. Jag ' Jag försöker ytterligare en redigering. Men kanske borde jag bara ta bort frågan eftersom den orsakar förvirring.
Svar
Det vanliga sättet att fixa detta är att använda css i ditt Bootstrap-baserade undertema. För användarnamn och lösenordsinloggningsfält:
#edit-name, #edit-pass { width: 15em; } Obs! Jag letar efter en lösning som täcker alla form av inmatning, inte bara användarinloggning som specialfall.
Du kan använda den här metoden (css) för varje textinmatningsfält där du vill åsidosätta Bootstraps standardbeteende. Uppenbarligen måste du använda rätt css-väljare för det fält du vill åsidosätta.
Kommentarer
- Tack för att du tog dig tid att svara. Se min " EDIT 2 " – Jag hoppas undvika att behöva identifiera varje enskilt fält som kan påverkas från fall till fall eftersom det inte är praktiskt eller kan underhållas
- inmatning och mål efter formkontrollklass av typtext?
- @kevin, förlåt, men jag förstår inte frågan.
- istället för att använda ID: n kan du bara rikta inmatningar med den klassen, som är av typen ' text '.
- @Kevin tack, ja det är mer som jag hoppades på. Men det verkar som om jag fortfarande skulle fastna med en fast bredd som 15em. Jag föredrar att behålla den faktiska bredden som anges i #storlek. Jag vill " ångra " vad Bootstrap gjorde för att åsidosätta bredderna och plocka upp exakt samma bredd som förekommer i Bartik.
Svar
Jag hade hoppats på ett svar från och expert och skulle fortfarande välkomna det – jag skulle gärna ställ in acceptera ett annat svar istället för mitt.
Här är mitt bästa försök hittills. Det verkar fungera för inloggningssidan och sökblocket. Men jag känner fortfarande att jag kämpar mot ett system jag inte har. förstår inte helt.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }