如何解决使用Bootstrap<Dropdown>箭头时,单击CSS / Bootstrap / ReactJS时,其位置会稍微向上移动
我在使用null
时遇到了问题,实际上,单击箭头时,箭头的位置略微向上移动,我花了很多时间并进行了一些调整,以使其位置固定,但仍保持不变,请提出任何建议/想法。
Update-1 ,当我在 <Dropdown.Toggle>
时,原来的问题已解决,但是现在单击后对应的菜单正出现在下面的箭头之后但我希望它会在填充/边距后开始,请有任何想法
-height=0px
来自Snippet
ReactJS
-
return (
<nav className="header">
<ul>
<li>
<Dropdown id="dropdownbasic" as={ButtonGroup} style={{ marginTop: "5px",position: "relative",float: "left",top: "13px" }}>
<Button .......> </Button>
<Dropdown.Toggle
className="signinDropdown"
split
variant="success"
aria-expanded="false"
// below i added the height it solved my first issue and the arrow is now still all the time
style={{ "height":"0px",background: "none",borderStyle: "none",outline: "none !important" }}
/>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</li>
</ul>
</nav>
)
来自Snippet
文件
CSS
```
// added the below css but still the menu starts just below the arrow
#dropdownbasic > :second-child{
top:158px;
padding-top: "13px";
}
.signinDropdown:focus,signinDropdown.focus {
outline: none;
box-shadow: none;
background-color: none;
box-shadow: none !important;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。