css - 在React上更改Bootstrap Dropdown的方向

我正在尝试显示导航栏下拉菜单以向左打开，但它始终保持向右打开。我的下拉菜单位于导航栏的最右侧，当我打开它时，它会向右打开，位于布局之外。

我已经尝试过“向右拉”和“向左拉”的解决方案，但无济于事。同样，“下拉菜单右”和“下拉菜单左”解决方案不起作用。

html5

<ul className="nav navbar-nav navbar-right">
            <li className="nav-item dropdown">
                <a className="nav-link" id="walletOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img src={require('../img/wallet.svg')} alt="easyfeedbacktoken" height="40px" />
                </a>
                <ul className="dropdown-menu" aria-labelledby="walletOptions">
            <ImportMnemonicModal onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
            <ShowMnemonic mnemonic = {this.props.mnemonic}/>
            <DeleteWallet onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
        </ul>
            </li>
        </ul>

我希望下拉菜单降至左侧。它总是掉到右边。

最佳答案

尝试将其从dropDOWN更改为dropLEFT。
这样，它总是向左打开

变更：

<li className="nav-item dropdown">

至 ：

<li className="nav-item dropleft">

完整的代码：

<ul className="nav navbar-nav navbar-right">
        <li className="nav-item dropleft">
            <a className="nav-link" id="walletOptions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <img src={require('../img/wallet.svg')} alt="easyfeedbacktoken" height="40px" />
            </a>
            <ul className="dropdown-menu" aria-labelledby="walletOptions">
        <ImportMnemonicModal onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
        <ShowMnemonic mnemonic = {this.props.mnemonic}/>
        <DeleteWallet onUpdateMnemonic = {this.props.onUpdateMnemonic}/>
    </ul>
        </li>
    </ul>

源引导程序（https://getbootstrap.com/docs/4.0/components/dropdowns/#dropleft-variation）