Ad esempio: In / user / login entrambi i campi di input del nome utente e della password includono un attributo HTML size = “60”.
In Bartik, i campi hanno una larghezza fissa.
In Bootstrap , i campi sono allungati per riempire lintera larghezza dello schermo.
Comportamento richiesto: Vorrei fai in modo che Bootstrap obbedisca allattributo size – su / user / login e su ogni altra singola pagina del sito web. Non sono in grado di generare un elenco di tutte le pagine interessate poiché ce ne sono molte e cambierà nel tempo.
Sembra che qualcosa in Bootstrap SCSS stia rovinando le larghezze dei campi di input. Vorrei eliminare quel qualcosa o sovrascriverlo. Tuttavia non sono ancora riuscito a capire come farlo.
Cosa ho trovato finora: Esiste già un problema su Drupal.org , in cui il responsabile del modulo markcarver dice
Il motivo per cui sono “ri” allungati “a tutta larghezza è che entrambi hanno una classe di controllo del modulo. Questo fa parte del progetto di Bootstrap e non ho intenzione di combatterlo fuori dagli schemi. Esistono diversi modi per modificare questo modulo come meglio credi, in un sottotema.
Ciò che funziona in parte ma non è corretto al 100%: Sarebbe possibile scrivere CSS per impostare una nuova larghezza su tutti gli input con la classe di controllo del modulo di tipo testo. ma imposta la larghezza su un valore fisso come 15em. Vorrei recuperare la larghezza originale, che sarà diversa per ogni input.
Commenti
- Mi chiedo perché don ' t risolvi il problema semplicemente con CSS ???
- @leymannx Ho chiarito, vedi " EDIT 2 ". Sì, mi aspetto di risolverlo con CSS, ma sto cercando una singola modifica che copra tutti i campi. Se sai come farlo, pubblica / commenta.
- Se la persona che ha votato negativamente potesse spiegare perché, allora forse potrei imparare qualcosa e fare domande migliori in futuro
- Non ' t downvote, ma immagino sia successo perché in realtà fai una domanda troppo ampia e non ' metti in evidenza tutto ciò che hai fatto tu stesso finora per risolvere questo problema da solo. A parte questo, quando puoi aggiustarlo con CSS e chiederci come farlo, anche questa domanda è fuori tema. Non ' ti insegneremo come creare un sottotema e non ti insegneremo ' come scrivere CSS affidabili. Ci sono già centinaia di tutorial là fuori che lo coprono. In bocca al lupo! 🙂
- @leymannx Grazie. In effetti sto facendo una domanda molto specifica, ma credo di averla spiegata male. ' proverò unaltra modifica. Ma forse dovrei semplicemente eliminare la domanda poiché crea confusione.
Risposta
Il modo standard per risolvere questo serve per usare css nel tuo sottotema basato su Bootstrap. Per i campi di accesso nome utente e password:
#edit-name, #edit-pass { width: 15em; } NB Sto cercando una soluzione che copra ogni forma di input, non solo accesso utente come caso speciale.
Puoi utilizzare questo metodo (css) per ogni campo di immissione di testo in cui desideri sovrascrivere Il comportamento predefinito di Bootstrap. Ovviamente, è necessario utilizzare il selettore CSS corretto per il campo che si desidera sovrascrivere.
Commenti
- Grazie per aver dedicato del tempo per rispondere. Consulta il mio " EDIT 2 " – Spero di evitare di dover identificare ogni singolo campo che potrebbe essere interessato caso per caso in quanto ciò non è pratico o gestibile
- input e target dalla classe di controllo del modulo di tipo testo?
- @kevin, scusa, ma non capisco la domanda.
- invece di utilizzare gli ID, potresti semplicemente scegliere come target input con quella classe, che sono di tipo ' text '.
- @Kevin grazie, sì, è più simile a quello che speravo. Tuttavia sembra che sarei ancora bloccato con una larghezza fissa come 15em. Preferirei mantenere la larghezza effettiva specificata in #size. Vorrei " annullare " qualsiasi cosa abbia fatto Bootstrap per sovrascrivere le larghezze e riprendere esattamente la stessa larghezza che si trova in Bartik.
Risposta
Avevo sperato in una risposta da un esperto e lavrei comunque accolta con favore – sarei felice di set accetta unaltra risposta al posto della mia.
Ecco il mio miglior tentativo finora. Sembra funzionare per la pagina di accesso e il blocco di ricerca. Tuttavia mi sento ancora come se stessi “combattendo contro un sistema che non ho” t comprendere appieno.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }