Esimerkki: At / user / login sekä käyttäjänimen että salasanan kentät sisältävät HTML-määritteen size = ”60”.
Bartikissa kenttien leveys on kiinteä.
Bootstrapissa , kentät on venytetty täyttämään koko näytön leveys.
Pyydetty toiminta: Haluan saada Bootstrap noudattamaan size-määritettä – on / user / login ja jokaisella verkkosivuston sivulla. En pysty luomaan luetteloa kaikista sivuista, joita asia koskee, koska niitä on paljon, ja se muuttuu ajan myötä.
Vaikuttaa siltä, että jokin Bootstrap SCSS -ohjelmassa sekoittaa syötekenttien leveyksiä. Haluaisin poistaa sen tai ohittaa sen. En kuitenkaan vielä onnistunut selvittämään, miten se tehdään.
Mitä olen tähän mennessä löytänyt: Drupal.org -palvelussa on jo -ongelma, jossa moduulin ylläpitäjän merkki kertoo
Syy siihen, että he ”venytetään” koko leveydellä, on se, että molemmilla on muodonhallintaluokka. Tämä on osa Bootstrapin suunnittelua, enkä aio taistella tuota pakettia vastaan. On olemassa useita tapoja muuttaa tätä muotoa mielestäsi sopivana aliteemassa.
Mikä osittain toimii, mutta ei 100-prosenttisesti oikein: Olisi mahdollista kirjoittaa CSS asettamaan uusi leveys kaikille syötteille, joissa on tyypin tekstin muoto-ohjausluokka. Se on hyvä, mutta se asettaa leveyden kiinteään arvoon, kuten 15em. Haluaisin palauttaa alkuperäisen leveyden, joka on erilainen jokaisessa syötteessä.
Kommentit
- Mietin, miksi don ' t yksinkertaisesti korjaat tämän CSS: llä ???
- @leymannx Olen selventänyt, katso " MUOKKAA 2 ". Kyllä, odotan korjaavan sen CSS: llä, mutta etsin yhtä muutosta, joka kattaa kaikki kentät. Jos tiedät, miten se tehdään, lähetä / kommentoi.
- Jos alas äänestänyt henkilö voisi selittää, miksi sitten voisin oppia jotain ja kysyä parempia kysymyksiä tulevaisuudessa
- Ei ' ei äänestänyt, mutta luulen, että se tapahtui, koska sinä todella kysyt liian laajaa kysymystä ja älä ' korosta mitään, mitä olit itse tehnyt. toistaiseksi korjata ongelma itse. Sen lisäksi, että kun voit korjata sen CSS: llä ja kysyä meiltä, miten se tehdään, niin tämä kysymys on myös aiheen ulkopuolella. Opimme ' t opettamaan, miten voit luoda aliteeman, ja voitti ' opettaa sinulle, kuinka kirjoittaa vankka CSS. Siellä on jo satoja opetusohjelmia, jotka kattavat sen. Onnea! 🙂
- @leymannx Kiitos. Itse asiassa esitän hyvin tarkan kysymyksen, mutta luulen, että olen selittänyt sen huonosti. Yritän vielä yhtä muokkausta '. Mutta ehkä minun pitäisi vain poistaa kysymys, koska se aiheuttaa sekaannusta.
Vastaa
Tavallinen tapa korjata Tämän tarkoituksena on käyttää css: ää Bootstrap-pohjaisessa aliteemassasi. Käyttäjätunnuksen ja salasanan kirjautumiskentät:
#edit-name, #edit-pass { width: 15em; } NB I ”Etsin ratkaisua, joka kattaa kaikki syöttötapa, ei vain käyttäjän sisäänkirjautuminen erityistapauksena.
Voit käyttää tätä tapaa (css) jokaisessa tekstinsyöttökentässä, jonka haluat ohittaa. Bootstrapin oletuskäyttäytyminen. Sinun on tietysti käytettävä oikeaa css-valitsinta kentällä, jonka haluat ohittaa.
Kommentit
- Kiitos, että käytit aikaa vastata. Katso sivuni " MUOKKAA 2 " – Toivon, ettei minun tarvitse tunnistaa kaikkia yksittäisiä kenttiä, joihin tapauskohtaisesti voi vaikuttaa koska se ei ole käytännöllistä tai ylläpidettävää
- syöttää ja kohdistaa tyypin tekstin muoto-ohjausluokittain?
- @kevin, anteeksi, mutta en ymmärrä kysymystä.
- ID-tunnusten sijaan voit kohdistaa vain kyseisen luokan syötteisiin, jotka ovat tyyppiä ' text '.
- @Kevin kiitos, kyllä, se on enemmän kuin mitä toivoin. Näyttää kuitenkin siltä, että olisin edelleen jumissa kiinteän leveyden kanssa, kuten 15em. Haluaisin mieluummin säilyttää #size -kohdassa määritetyn todellisen leveyden. Haluaisin " kumota " mitä Bootstrap teki ohittaakseen leveydet ja poimien täsmälleen saman leveyden kuin Bartikissa.
vastaus
Toivoin vastausta ja asiantuntijaa ja olisin silti iloinen siitä – olisin mielelläni aseta hyväksy toinen vastaus omani sijasta.
Tässä on tähän mennessä paras yritykseni. Se näyttää toimivan kirjautumissivulla ja hakulohkossa. Minusta tuntuu kuitenkin siltä, että taistelen järjestelmää vastaan, jota en aio. en ymmärrä täysin.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }