时间戳

首页 > 解决方案 > 在 React 上更改 Bootstrap 下拉菜单的方向

css - 在 React 上更改 Bootstrap 下拉菜单的方向

问题描述

我试图显示一个导航栏下拉菜单向左打开，但它一直向右打开。我的下拉菜单位于导航栏的最右侧，当我打开它时，它会向右打开，超出布局。

我已经尝试过“向右拉”和“向左拉”的解决方案，但无济于事。“dropdown-menu-right”和“dropdown-menu-left”解决方案也不起作用。

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>

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

标签： cssreactjs

解决方案

尝试将其从 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）

推荐阅读