React-bootstrap NavBar 和組件定位使用 css 問題

Question

我學習了 Reactjs 和 Javascript，現在我有了這個 react-bootstrap NavBar ，想知道如何讓這個搜索輸入組件更靠近圖像。 我有一個CodeSandbox

我使用媒體查詢，但無法理解為什么徽標圖像占用（推）所有空間，因此搜索輸入不能很好地移動到左側和中心。 我將媒體查詢斷點設置為 1410 像素、1216 像素、992 像素，並嘗試在 css 中處理它，但我無法在react-bootstrap中為此找到 css 詳細信息。
請指教

我知道 react-bootstrap fluid體會均勻地隔開組件，但是當屏幕尺寸改變時，為什么要獲得更精細的定位控制？

也許我對 React-bootstrap 提出了很多要求，或者有一些更好的庫或方法可以做到這一點？

我在這里寫的這個紅環顯示了問題：

Answer 1

徽標和搜索文本框之間的差距似乎是寬度為 60% 的結果。

.logo {
width: 60%;
}

嘗試刪除上面的寬度並從其包裝錨點調整徽標圖像寬度。 像下面

.container-fluid {
 .navbar-brand {
  max-width: 28%; // adjust this size as you please
 }
}

參考CodeSandbox