React-Boostrap [设置下拉菜单宽度与更改时的大小相同]

Question

IAM试图将下拉菜单宽度动态设置为与整个下拉列表更改时的大小完全相同。如何获得下拉本身的宽度？

我还试图将下拉菜单与“结束”对齐的“结束”对齐。在这种情况下，填充左侧剩余空间的问题是问题所在。

我尝试了不同的方法，并失败了。有人有一个想法来完成这个问题吗？

我在做什么错？

import React from 'react';
import {Col, Container, Dropdown, Row} from 'react-bootstrap';

class SelectComp extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        id: 1,
    };
}

render() {
    return (
            <div>
                <Dropdown align="end">
                    <Dropdown.Toggle variant="outline-success" id="dropdown-basic">
                        Exposure Type: {
                            {
                                '1': 'Eins worked',
                                '2': 'Zwei worked',
                                '3': 'Drei worked',
                            }[this.state.id]
                        }
                    </Dropdown.Toggle>
                    <Dropdown.Menu>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 1});
                        }}>1</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 2});
                        }}>2</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 3});
                        }}>3</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 4});
                        }}>4</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 5});
                        }}>5</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 6});
                        }}>6</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 7});
                        }}>7</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 8});
                        }}>8</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 9});
                        }}>9</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 10});
                        }}>10</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 11});
                        }}>11</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 12});
                        }}>12</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 13});
                        }}>13</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 14});
                        }}>14</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 15});
                        }}>15</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 16});
                        }}>16</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 17});
                        }}>17</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 18});
                        }}>18</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 19});
                        }}>19</Dropdown.Item>
                        <Dropdown.Item onClick={() => {
                            this.setState({id: 20});
                        }}>20</Dropdown.Item>
                    </Dropdown.Menu>
                </Dropdown>
            </div>
    )
}
}

export default SelectComp;

Answer 1

使您的外部容器内联块，并提供下拉菜单100％宽度。例如：

 <Dropdown className="d-inline-block">
 ...
    <Dropdown.Menu className="w-100">

https://codesandbox.io/s/modest-galois-modest-galois-galois-galois-z2xnlk