React Bootstrap 下拉菜单样式问题

Question

我在我的 react 应用程序中创建了一个引导下拉菜单。 下拉代码如下所示。

<Dropdown className="drop">
                 <Dropdown.Toggle variant="success" id="dropdown-basic">
                     Dropdown Button
                 </Dropdown.Toggle>
                 <Dropdown.Menu  className="dropMenu">
                     <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                     <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                     <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
                     <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                     <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                     <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
                 </Dropdown.Menu>
             </Dropdown>

这是我为此申请的 css 样式。

.drop{
    position: relative;
    display: inline-block;
}
.dropMenu{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 112px 160px;
    z-index: 1;
    height: auto;
}
.drop:hover .dropMenu {
    display: inline-block;
}

但是当我将鼠标悬停在按钮上时，它会显示类似这样的内容。

我怎样才能将这些项目作为一个列表。

Answer 1

在最后一个 css 类中，您将添加两个属性.. display:flex 和 flex-direction:column 您的最终结果将是这样的..

.drop:hover .dropMenu {
  display:flex
  flex-direction: column;
}