时间戳

首页 > 解决方案 > React Bootstrap 下拉菜单样式问题

reactjs - React Bootstrap 下拉菜单样式问题

问题描述

我在我的反应应用程序中创建了一个引导下拉菜单。下拉代码看起来像这样。

<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;
}

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

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

标签： reactjsbootstrap-4dropdown

解决方案

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

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

推荐阅读