Na przykład: W / user / login pola do wprowadzania nazwy użytkownika i hasła zawierają atrybut HTML size = „60”.
W Bartik pola mają stałą szerokość.
W Bootstrap , pola są rozciągnięte, aby wypełnić całą szerokość ekranu.
Żądane zachowanie: Chciałbym sprawia, że Bootstrap przestrzega atrybutu size – na / user / login i na każdej innej stronie w serwisie. Nie jestem w stanie wygenerować listy wszystkich stron, których dotyczy problem, ponieważ jest ich wiele i będzie się zmieniać z czasem.
Wygląda na to, że coś w Bootstrap SCSS psuje szerokości pól wejściowych. Chciałbym to coś usunąć lub nadpisać. Jednak nie udało mi się jeszcze wymyślić, jak to zrobić.
Co znalazłem do tej pory: Istnieje już problem na Drupal.org , w którym opiekun modułu Markcarver mówi
Powodem, dla którego są „ponownie” rozciągnięte „na pełną szerokość, jest to, że oba mają klasę kontroli formularza. Jest to część projektu Bootstrap i nie zamierzam z tym walczyć po wyjęciu z pudełka. Istnieje kilka sposobów, aby zmodyfikować ten formularz według własnego uznania w podtemacie.
Co częściowo działa, ale nie w 100% dobrze: Byłoby możliwe napisanie CSS w celu ustawienia nowej szerokości na wszystkich wejściach z klasą kontroli formularzy typu tekst. To dobrze, ale ustawia szerokość na stałą wartość, taką jak 15em. Chciałbym odzyskać pierwotną szerokość, która będzie inna dla każdego wejścia.
Komentarze
- Zastanawiam się, dlaczego nie ' t po prostu naprawisz to za pomocą CSS ???
- @leymannx Wyjaśniłem, zobacz " EDYCJA 2 ". Tak, spodziewam się, że naprawię to za pomocą CSS, ale szukam pojedynczej zmiany obejmującej wszystkie pola. Jeśli wiesz, jak to zrobić, napisz / skomentuj.
- Jeśli osoba, która głosowała w dół, mogłaby wyjaśnić dlaczego, może mógłbym się czegoś nauczyć i zadać lepsze pytania w przyszłości.
- Nie ' nie głosuj przeciw, ale myślę, że stało się tak, ponieważ zadajesz zbyt szerokie pytanie i nie ' nie podkreślaj niczego, co zrobiłeś samodzielnie jak dotąd, aby samodzielnie rozwiązać ten problem. Poza tym, jeśli możesz to naprawić za pomocą CSS i zapytać nas, jak to zrobić, to również to pytanie jest nie na temat. Wygraliśmy ', nie nauczyliśmy Cię, jak tworzyć podtematy, i wygraliśmy ', nie nauczyliśmy Cię pisać solidnego CSS. Istnieją już setki samouczków na ten temat. Powodzenia! 🙂
- @leymannx Dzięki. Właściwie zadaję bardzo konkretne pytanie, ale myślę, że źle to wyjaśniłem. ' spróbuję jeszcze jednej edycji. Ale może powinienem po prostu usunąć pytanie, ponieważ powoduje to zamieszanie.
Odpowiedź
Standardowy sposób naprawy ma to na celu użycie css w pod-motywie opartym na Bootstrapie. W przypadku pól logowania nazwy użytkownika i hasła:
#edit-name, #edit-pass { width: 15em; } Uwaga: szukam rozwiązania, które obejmuje wszystkie forma wprowadzania danych, a nie tylko login użytkownika jako szczególny przypadek.
Możesz użyć tej metody (css) dla każdego pola wprowadzania tekstu, w którym chcesz nadpisać Domyślne zachowanie programu Bootstrap. Oczywiście musisz użyć odpowiedniego selektora css dla pola, które chcesz przesłonić.
Komentarze
- Dziękujemy za poświęcenie czasu na odpowiedź. Zobacz moje " EDYCJA 2 " – Mam nadzieję, że nie będę musiał identyfikować każdego pola, na które może mieć wpływ każdy przypadek ponieważ nie jest to praktyczne lub możliwe do utrzymania.
- dane wejściowe i docelowe przez klasę kontrolującą formularz typu tekst?
- @kevin, przepraszam, ale nie rozumiem pytania.
- zamiast używać identyfikatorów, możesz po prostu kierować reklamy na dane wejściowe z tą klasą, które są typu ' text '.
- @Kevin dzięki, tak, to bardziej przypomina to, na co liczyłem. Wydaje się jednak, że nadal tkwiłbym w stałej szerokości, takiej jak 15em. Wolałbym zachować rzeczywistą szerokość określoną w #size. Chciałbym " cofnąć " wszystko, co zrobił Bootstrap, aby zastąpić szerokości, i wybrać dokładnie taką samą szerokość, jaka występuje w Bartik.
Odpowiedź
Liczyłem na odpowiedź od eksperta i nadal byłbym zadowolony – byłbym szczęśliwy, gdyby set zaakceptuj inną odpowiedź zamiast mojej.
Oto moja najlepsza próba do tej pory. Wygląda na to, że działa w przypadku strony logowania i bloku wyszukiwania. Jednak nadal mam wrażenie, że „walczę z systemem, którego nie robię” nie w pełni rozumiem.
.form-control, .input-group .form-control, .input-group-btn { width: auto; }