Question

我有一个反应引导单按钮下拉列表。我试图在下拉按钮和我在屏幕上的另一个元素之间添加边距空间

似乎每当我向DropdownButton添加一个className来添加margin-bottom时，它只适用于DropdownButton的按钮部分，而不是DropdownButton的整个div。我想把余量放在整个div上。

<DropdownButton className='logOutUsersButton' title="Log Out Users" id={`dropdown-basic-1`}>
                    <MenuItem eventKey="1">All Users</MenuItem>
                    <MenuItem eventKey="2">Selected Users</MenuItem>
</DropdownButton>

logOutUsersButton类的样式如下：

.logOutUsersButton{
   margin-bottom: 20%;
}

这会导致按钮和菜单之间的空格（这两者都是下拉菜单的一部分）。我希望整个下拉列表使用margin-bottom，而不仅仅是按钮

Answer 1

将DropdownButton组件包含在另一个带有margin-bottom的div中可以解决问题。

<div className='logOutUsersButton'>
<DropdownButton title="Log Out Users" id={`dropdown-basic-1`}>
                    <MenuItem eventKey="1">All Users</MenuItem>
                    <MenuItem eventKey="2">Selected Users</MenuItem>
</DropdownButton>
</div>

样式React Bootstrap下拉按钮div

1 个答案: