React-bootstrap NavBar and components positioning using css issue

2
votes

I learn Reactjs and Javascript and now I have this react-bootstrap NavBar and wonder how to make this search input component move closer to the image. I hade a CodeSandbox

I use Media Queries but cant understand why the logo image take up(push) all space so the search input cant move to the left and center nicely. I set media Queries breakpoints at 1410px, 1216px, 992px and try to handle it in css but I cant find css details at react-bootstrap for this.
Please advice

I know the react-bootstrap fluid will evenly space out Components but are there some why to get finer grain control for positioning when screen size change?

Maybe I ask to much from React-bootstrap or there is some better library or way to do this?

This red ring I wrote here show the problem:

enter image description here

1
javascripthtmlcssreactjsreact-bootstrap

1 Answers

2
votes

The gap between logo and search text box seems to be a result of having a width 60%.

.logo {
width: 60%;
}

Try remove above width and adjust logo image width from it's wrapper anchor. Like below

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

refer CodeSandbox