宽度<navdropdown>在反应引导 5</navdropdown>

Question

新的一天，新的问题。 我不擅长 CSS，哎呀。

我想在 react-bootstrap 中设置下拉菜单的宽度，我尝试过：

<NavDropdown style={{width: "5vw"}} title="Utente" id="navbarScrollingDropdown">
{/* ... */}
</NavDropdown>

认为这会奏效，它所做的只是把标题搞砸了。 有什么方法可以改变下拉菜单的宽度而不弄乱他的标题？

Nodejs ver: 16.9.1 npm ver: 7.24 bootstrap ver: 5.1.1 react-bootstrap ver: 2.0.0-rc.0 react ver: 17.0.2

Answer 1

将其设置在下拉项目之一...

       <NavDropdown title="Utente" id="navbarScrollingDropdown">
           <NavDropdown.Item style={{width:'5vw'}} href="#action/3.1">Action</NavDropdown.Item>
           <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
           <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
       </NavDropdown>

https://codeply.com/p/Mgv3aww20F

Answer 2

添加这个 css：

.dropdown-menu {
        min-width: auto !important;
    }
    
    #navbarScrollingDropdown {
        width: fit-content;
    }