React Bootstrap下拉菜单样式问题
React Bootstrap下拉菜单样式问题
提问于 2021-10-03 16:08:48
我已经在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;
}但当我将鼠标悬停在按钮上时，它会显示如下所示的内容。
如何才能将这些项目作为列表获取。
回答 1
Stack Overflow用户
发布于 2021-10-04 07:33:46
在最后一个css类中，您将添加两个属性。display:flex和flex-direction:列您的最终结果将如下所示。
.drop:hover .dropMenu {
display:flex
flex-direction: column;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69426596
复制相关文章
相似问题
腾讯云开发者
