Bijvoorbeeld: Bij / user / login bevatten zowel de gebruikersnaam als het wachtwoord invoervelden een HTML-attribuut size = “60”.
In Bartik hebben de velden een vaste breedte.
In Bootstrap , worden de velden uitgerekt om de volledige schermbreedte te vullen.
Gevraagd gedrag: Ik wil graag laat Bootstrap het kenmerk size gehoorzamen – op / gebruiker / login, en op elke andere pagina van de website. Ik ben niet in staat om een lijst van alle betrokken paginas te genereren, aangezien er veel zijn en het zal in de loop van de tijd veranderen.
Het lijkt erop dat iets in Bootstrap SCSS de breedte van invoervelden verknoeit. Ik zou dat iets willen verwijderen of het opheffen. Ik ben er echter nog niet achter gekomen hoe ik dat moet doen.
Wat ik tot nu toe heb gevonden: Er is al een probleem op Drupal.org , waar moduleonderhouder markcarver zegt
De reden dat ze over de volledige breedte “worden” uitgerekt “is dat ze allebei een formuliercontrole-klasse hebben. Dit maakt deel uit van het ontwerp van Bootstrap en daar ga ik niet out-of-the-box tegen vechten. Er zijn verschillende manieren om dit formulier naar eigen inzicht aan te passen in een subthema.
Wat gedeeltelijk werkt, maar niet 100% juist: Het zou mogelijk zijn om CSS te schrijven om een nieuwe breedte in te stellen op alle invoer met form-control class of type text. Dat is goed, maar het stelt de breedte in op een vaste waarde, zoals 15em. Ik zou graag de oorspronkelijke breedte terug willen krijgen, die bij elke invoer anders zal zijn.
Opmerkingen
- Ik vraag me af waarom don ' lost u dit gewoon op met CSS ???
- @leymannx Ik heb het verduidelijkt, zie " BEWERK 2 ". Ja, ik verwacht het te repareren met CSS, maar ik ben op zoek naar een enkele wijziging die alle velden omvat. Als je weet hoe je dat moet doen, plaats dan een bericht / commentaar.
- Als de persoon die heeft neergehaald, zou kunnen uitleggen waarom ik misschien iets kan leren en in de toekomst betere vragen kan stellen.
- Heb niet ' t downvote, maar ik denk dat het is gebeurd omdat je eigenlijk een te brede vraag stelt en ' niets benadrukt wat je zelf hebt gedaan tot dusverre om dit probleem zelf op te lossen. Afgezien daarvan, als je het met CSS kunt repareren en ons vraagt hoe je dat moet doen, dan is deze vraag ook off-topic. We hebben ' gewonnen om u te leren hoe u een subthema moet maken en we hebben ' gewonnen om u te leren hoe u robuuste CSS moet schrijven. Er zijn al honderden tutorials die dat behandelen. Succes! 🙂
- @leymannx Bedankt. In feite stel ik een heel specifieke vraag, maar ik denk dat ik die slecht heb uitgelegd. Ik ' zal nog een bewerking proberen. Maar misschien moet ik de vraag gewoon verwijderen, want die veroorzaakt verwarring.
Answer
De standaardmanier om op te lossen dit is om css te gebruiken in je Bootstrap-gebaseerde subthema. Voor de gebruikersnaam en wachtwoord login velden:
#edit-name, #edit-pass { width: 15em; } NB Ik ben op zoek naar een oplossing die elke vorm van invoer, niet alleen gebruikersaanmelding als een speciaal geval.
U kunt deze methode (css) gebruiken voor elk tekstinvoerveld waar u wilt overschrijven Het standaardgedrag van Bootstrap. Het is duidelijk dat je de juiste css-selector moet gebruiken voor het veld dat je wilt overschrijven.
Reacties
- Bedankt dat je de tijd hebt genomen om te antwoorden. Zie mijn " EDIT 2 " – ik hoop te voorkomen dat ik elk afzonderlijk veld moet identificeren dat van geval tot geval kan worden beïnvloed aangezien dat niet praktisch of onderhoudbaar is
- invoer en doel door form-control klasse of type tekst?
- @kevin, sorry, maar ik begrijp de vraag niet.
- in plaats van IDs te gebruiken, zou je gewoon invoer met die klasse kunnen targeten, die van het type ' text ' zijn.
- @Kevin bedankt, ja dat lijkt meer op waar ik op hoopte. Het lijkt er echter op dat ik nog steeds vastzit met een vaste breedte zoals 15em. Ik zou liever de werkelijke breedte behouden die is opgegeven in #size. Ik zou " " willen ongedaan maken wat Bootstrap heeft gedaan om de breedtes te overschrijven, en exact dezelfde breedte opnemen die in Bartik voorkomt.
Answer
Ik had gehoopt op een antwoord van en expert en zou dat nog steeds verwelkomen – ik zou graag set een ander antwoord accepteren in plaats van het mijne.
Dit is mijn beste poging tot nu toe. Het lijkt te werken voor de inlogpagina en het zoekblok. Ik heb echter nog steeds het gevoel dat ik “vecht tegen een systeem dat ik niet doe” t volledig begrijpen.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }