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

Posted 2023-02-22

【中文标题】React-bootstrap NavBar 和组件定位使用 css 问题

【英文标题】：React-bootstrap NavBar and components positioning using css issue

【发布时间】：2021-01-19 09:16:45

【问题描述】：

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

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

我知道 react-bootstrap fluid 将均匀地隔开组件，但是有一些为什么要在屏幕尺寸时获得更精细的定位控制 改变？

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

我在这里写的这个红环说明了问题：

【参考方案1】：

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

.logo 
width: 60%;

尝试从其包装锚点中移除上述宽度并调整徽标图像宽度。如下所示

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

参考CodeSandbox

【讨论】：

你是个魔术师 谢谢！！我学到了很多！我能问一下我在哪里可以读到这个 ​​css 的东西吗？ react-boostrap 文档没有我能看到的

乐于助人。关注medium.com、dev.to等平台的相关文章

感谢继续它的工作，但只是一点点snatch，不能让它在 768px 下工作