React-Bootstrap DropdownButton无法设置按钮宽度为100%？

你可以通过两种方式修改DropdownButton底层按钮的宽度，让它填满容器：

方法一：使用buttonProps传递样式（推荐） #

React-Bootstrap的DropdownButton组件支持通过buttonProps属性，将任意props传递给底层的<button>元素。直接在这里设置宽度样式即可：

<DropdownButton
    key={index}
    id="dropdown-basic-button"
    title={
        <div style={{
            maxWidth: '250px',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
            whiteSpace: 'nowrap'
        }}>
            {url}
        </div>
    }
    style={{margin: "auto", width: "100%", display: "block"}}
    buttonProps={{ style: { width: '100%' } }}
>
    {/* 下拉菜单项 */}
</DropdownButton>

方法二：通过CSS类控制 #

给DropdownButton添加自定义类名，然后通过CSS选择器定位到底层按钮设置宽度：

1. 给组件添加类名：

<DropdownButton
    key={index}
    id="dropdown-basic-button"
    className="full-width-dropdown-btn"
    title={/* 你的title内容 */}
    style={{margin: "auto", width: "100%", display: "block"}}
>
    {/* 下拉菜单项 */}
</DropdownButton>

2. 编写CSS规则：

.full-width-dropdown-btn .dropdown-toggle {
    width: 100%;
}

为什么原来的设置不生效？ #

你之前设置的style是作用在DropdownButton的外层容器上，而非底层的<button>元素，所以无法让按钮本身填满容器。通过上面两种方式，就能直接把宽度样式应用到底层按钮上，实现填满CSS网格单元格的需求。

内容的提问来源于stack exchange，提问作者kastaplastislife