Как я могу изменить способ выравнивания навигационной панели на разных контрольных точках в Bootstrap?

Question

Я использую шаблон Bootstrap Cover в качестве основы для очень простого сайта для бизнеса и CV, который я делаю и изучаю на этом пути. Я понимаю концепцию точек останова. Я заметил три различных стили навигационной панели (и страницы), как я уменьшить ширину браузера:

1. «Cover» и Navbar левые и правые выровнены, но в невидимой фиксированной ширине коробки
2. То же выше, но невидимый ящик теперь имеет ту же ширину, что и окно браузера (т. е. нет какого-либо поля, такого как выше), элементы выскочили наружу
3. «Обложка» стеков поверх элементов навигационной панели.

Если я подстегнул ширину окна между этапом 1 и 2, я вижу элементы, прыгающие вокруг. Это то, что я хотел бы изменить, так что этап 1 продолжает сжимать предметы все ближе и ближе, а затем, когда они близки к касанию, он переходит на этап 3 (т.е. избавляется от стадии 2)

Это возможное?

Answer 1

Это возможно с использованием запросов в формате CSS.

Если вы проверите элемент <div class="masthead clearfix">, вы увидите, что при изменении размера окна браузера применяются разные стили.

Этап 1. Ширина окна браузера> 992px, ширина этого элемента составляет 700px Этап 2. Ширина окна Broswer> 768px, ширина этого элемента 100% и охватывает всю страницу. Этап 3. Ширина окна браузера < = 768px, ширина этого элемента по-прежнему 100%.

Вы также увидите, что у <h3 class="masthead-brand"> и <ul class="nav masthead-nav"> есть стили, которые плавают влево и вправо, пока ширина окна браузера не станет меньше 768 пикселей.

Если вы не хотите видеть изменения между этапами 1 и 2, вам нужно либо удалить любое из правил, упомянутых мной на этапе 1 или 2, либо переопределить их своими стилями, а также переопределить стили, которые плавают h3 и ul влево и вправо.