Я пытаюсь создать эту панель навигации: ![enter image description here](https://i.stack.imgur.com/GL9YP.png)
К сожалению, не все CSS хотят применить. Это как если бы CSS моего navbar был «сильнее».
Я сделал это:
return (
<Navbar className="navbar navbar-expand-lg navbar-light bg-light" >
<NavbarBrand className="navbar-brand" href="/consultation">Etamille</NavbarBrand>
<NavbarToggler onClick={toggleNavbar} className="mr-2" />
<Collapse isOpen={!collapsed} navbar>
<Nav navbar className="navbar-nav mr-auto">
<NavItem className="nav-item">Home
</NavItem>
<NavItem className="nav-item">My stories
</NavItem>
<NavItem className="nav-item">Profil
</NavItem>
<Form class="form-inline my-2 my-lg-0">
<Input class="form-control mr-sm-2" type="text" placeholder="Search"/>
</Form>
</Nav>
<Button type="button" className="btn btn-primary">Sign in</Button>
</Collapse>
</Navbar>
);
};
Вот что у меня есть: ![enter image description here](https://i.stack.imgur.com/OLX86.png)
Как я могу сделать это правильно? Я запутался, почему моя кнопка не черная, и почему у меня есть эти странные названия (немного сверху). Это проблема, когда мы используем ReactStrap? Я пытался использовать "col" или "container", ничего не принималось во внимание.
Заранее спасибо