React-Bootstrap NavBar和使用CSS定位组件的问题

编程问答 2022-06-10

问题描述

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

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

我知道react-bootstrap fluid会平均分配组件空间，但是有一些原因为什么在屏幕尺寸变大时可以获得更好的颗粒控制来定位 改变吗？

也许我向React-bootstrap提出了很多要求，或者有一些更好的库或方法可以做到这一点？

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

enter image description here

解决方法

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

.logo {
width: 60%;
}

尝试除去上述宽度，并从其包装锚中调整徽标图像的宽度。像下面一样

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

推荐CodeSandbox

htmljavascriptreact-bootstrapreactjsreactjs