react-bootstrap: Nav without NavItem?

Question

Maybe I am just stupid or prejudiced, but I really really don't like NavItem . The fact that it is an <a> wrapped inside an <li> enforces a lot of rules that I don't want to abide by. I just want to create my own Navbar using the Bootstrap stylings, but with my own elements, like <Button> , <ButtonGroup> , maybe an unclickable image or even a search box.

Which leads me to my question: What is the easiest way to get rid of NavItem and get (somewhat) properly styled, ordered elements?

If I simply put a <li><Button>...</Button></li> in <Nav> , it complains about properties that are not expected by <li> . I tried replacing <Nav> with my own <ul> while copying all it's properties and it still did not work out well. I imagine, just playing around like that will eventually work but easily break in the future because I am not respecting some of Navbar 's design considerations.

Is Navbar only to be used with <Nav> and links? If I want non- elements in my bar, do I have to do the whole thing from scratch? There must be a better solution...?

Answer 1

我认为您发现制作组件或更改引导程序组件更容易