Bootstrap 5 Изменить класс заполнения CSS для свернутых элементов?

У меня есть простая навигационная панель, в основном скопированная из учебника по навигационной панели Bootstrap. По сути, я помещаю отступы в форму, используя класс Bootstrap «pe-5» (я использовал pe-5 только для лучшей демонстрации, я, вероятно, уменьшу его, если смогу это исправить), поэтому он выровнен справа от панели навигации. с некоторым пространством от края экрана и складной кнопкой, которая появляется, когда форма обернута flex (пожалуйста, извините мой словарный запас, поскольку я новичок как в webdev, так и в bootstrap (и flexbox)). Однако, когда кнопка свернута (например, когда я сжимаю окно до появления кнопки, а затем нажимаю кнопку свернуть), отступы все еще присутствуют на кнопке ввода и поиска формы, и это выглядит странно и выключено.

Есть ли способ изменить CSS для свернутых элементов? Я пробовал много вещей, в том числе изменение CSS для отображения коллапса:

#navbarCollapse.navbar-collapse.collapse.show #top-search-form {
padding-left: 0rem;
padding-right: 0rem; 
}

Однако, казалось, ничего не изменилось. И я почти уверен, что у меня правильный путь CSS, так как изменение полей, кажется, имеет эффект, но меняет его во время запуска анимации, поэтому он выглядит так, как будто он «прыгает», когда он рушится. Тем не менее, изменение заполнения ничего не дает. Я также пробовал несколько других методов CSS, которые я не могу вспомнить навскидку.

Я также пытался использовать Javascript, но он стал очень запутанным, и мне кажется, что есть гораздо более простое решение. Я пытался добавить прослушиватели событий, когда сворачиваемая кнопка была показана и скрыта, и добавлял/удалял класс pe-5 с помощью classList.remove(), но я столкнулся с проблемой, что при изменении размера окна, если кнопка свернута но скрытым, он по-прежнему считается «свернутым», и класс заполнения начальной загрузки все равно будет удален. Затем я попытался добавить прослушиватель событий для изменения размера окна, и он стал очень грязным, и я не мог заставить его работать так, как предполагалось, поскольку найти, переполняется ли элемент через flex, намного сложнее, чем я думал, и я подумал, что это в конечном итоге замедлит моя страница значительно упала.

Вот пример моей проблемы:
https://jsfiddle.net/jbu812os/
Просто уменьшите экран, пока не появится кнопка сворачивания гамбургера, и нажмите ее, и это должно показать, что поле ввода ввода и кнопка поиска не занимают всю ширину свертывания.
Любая помощь будет принята с благодарностью, спасибо!

Недостаточно подробностей отладки, не давайте ссылку на скрипку, поместите код сюда, и вы пробовали искать в инструментах разработки браузера?

Zach Jensz 22.11.2022 05:54

Я занимался отладкой с помощью devtools около часа, но ваш комментарий дал мне идею, которая привела к решению большей части моей проблемы, так что большое вам спасибо! Просто из любопытства, почему бы не опубликовать jsfiddle? Когда я исследовал эту проблему, около половины сообщений StackOverflow содержали ссылки jsfiddle. Я полагаю, что у меня не так много кода для публикации, но должен ли я сохранить jsfiddle для более крупных вещей? В любом случае, ура! Спасибо за помощь!

user192148 22.11.2022 08:52

Рад, что смог помочь. Причина, по которой мы не рекомендуем иметь только jsfiddle, заключается в том, что ссылка может быть отключена, и будущие посетители с вашей проблемой, которые пришли сюда с помощью поисковой системы, не смогут увидеть, в чем заключалась ваша проблема. Во что бы то ни стало, есть один, чтобы дополнить фрагмент переполнения стека, если это большой проект, но затем снова попробуйте найти минимальный код с проблемой.

Zach Jensz 23.11.2022 00:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
78
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуйте добавить эти два обработчика событий jQuery:

$('#navbarCollapse').on('show.bs.collapse', function() {
    $('#top-search-form').removeClass('pe-5')
})

$('#navbarCollapse').on('hidden.bs.collapse', function() {
    $('#top-search-form').addClass('pe-5')
})

Я использую встроенные события Bootstrap, и они, кажется, работают. А для проблемы с изменением размера вы все равно можете использовать событие window.resize. Что-то вроде этого:

$(window).resize(function() {
  if ($(window).width > 300) {
    $('#navbarCollapse').collapse('hide')
  }
})

Это заставит ваш компонент сворачивания скрываться всякий раз, когда размер вашего экрана превышает 300 пикселей.

Я не уверен, почему jQuery у меня не работает должным образом (да, js предшествует BS). Тем не менее, я только что набрал обычную версию javascript, и она отлично сработала! Единственная проблема заключалась в изменении размера окна. Но после некоторой отладки я обнаружил, что атрибут display класса .navbar-toggler возвращает «none», если он не отображается, и «block», если он отображается (возвращает все строки). Для тех, кто пытается понять это, важно отметить, что это вычисляемый стиль, поэтому используйте const el = document.querySelector(.navbar-toggler'), затем getComputedStyle(el). Если он возвращает 'none', добавьте, иначе rem.

user192148 22.11.2022 08:46

Я определенно ненавижу то, как комментарии работают в StackOverflow. Хотел объяснить другую часть проблемы, которая у меня была, и опубликовать свое решение, но не хватило текста. Тоже хотел сказать СПАСИБО! Я попытаюсь заставить jQuery работать и отредактировать свой исходный пост с помощью jQuery и обычного решения javascript. Спасибо за помощь, я очень ценю это!

user192148 22.11.2022 08:56

Проголосовал за, но постарайтесь избегать jQuery, особенно в 2022 году

Zach Jensz 23.11.2022 00:47

Другие вопросы по теме