样式化 React Bootstrap 下拉按钮 div答案

【问题标题】：Styling React Bootstrap Dropdown button div样式化 React Bootstrap 下拉按钮 div
【发布时间】：2018-11-25 15:39:14
【问题描述】：

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

似乎每当我向 DropdownButton 添加一个 className 以添加底部边距时，它只适用于 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%;
}

这会导致按钮和菜单（它们都是下拉菜单的一部分）之间的空间。我希望整个下拉菜单都使用底部边距，而不仅仅是按钮

【问题讨论】：

你能创建一个 jsfiddle 或 codepen 吗？
试图设置它以进行反应很难。我会再试一次

标签： css reactjs react-bootstrap

【解决方案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>

【讨论】：