javascript - React-bootstrap NavBar 和组件定位使用 css 问题

Question

我学习了 Reactjs 和 Javascript，现在我有了这个 react-bootstrap NavBar，想知道如何让这个搜索输入组件更靠近图像。我有一个CodeSandbox

我使用媒体查询，但无法理解为什么徽标图像占用（推送）所有空间，因此搜索输入无法很好地向左和居中移动。我将媒体查询断点设置为 1410px、1216px、992px 并尝试在 css 中处理它，但我无法在react-bootstrap找到 css 详细信息。
请指教

我知道 react-bootstrapfluid会均匀地隔开组件，但是当屏幕尺寸发生变化时，为什么要获得更精细的定位控制？

也许我对 React-bootstrap 有很多要求，或者有更好的库或方法来做到这一点？

我在这里写的这个红环显示了问题：

标签： javascripthtmlcssreactjsreact-bootstrap

Answer 1

徽标和搜索文本框之间的差距似乎是宽度为 60% 的结果。

.logo {
width: 60%;
}

尝试删除上面的宽度并从它的包装锚调整徽标图像宽度。像下面

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

参考CodeSandbox