Блог

Я изучаю rectjs и использую панель навигации react-bootstrap. Я использую предлагаемые точки останова из документов Media Queries, и это выглядит так:

Вот мои контрольные точки медиа-запросов:

 // Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) and (max-width: 1920px) {
  

Я создал CodeSandbox

ПРИМЕЧАНИЕ: установите для окна браузера 100% масштабирование в поле CodeSandbox, чтобы это работало!

Моя проблема заключается в том, когда я изменяю размер окна и получаю ширину 905px . Тогда я не могу точно контролировать макет в css, поэтому макет начинает сворачиваться:

Вот как это должно выглядеть:

При 905 пикселей кнопка переключения прыгает вниз:

При 758px это выглядит еще хуже

Я пытаюсь изменить css:

   .container-fluid { // THIS IS LOGO IMAGE
    .navbar-brand {
     max-width: 37%; 
    }
   }

  .form-inline { // THIS IS THE SEARCH INPUT
    width: 80%;
  }
  

Проблема в том, что я думаю, что я не могу переместить ВВОД ПОИСКА и кнопки влево, поскольку ширина экрана становится меньше. Изменение form-inline ширины, допустим 40px , сокращает ее только с правой стороны.
Любой совет полезен, спасибо?

Думаю, перемещение кнопки влево на этом изображении помогло бы, но как?