Question

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

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

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>

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

Answer 1

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

更改：

public static final String TAG = "LifeCycles";

FragmentManager manager;
FragmentA fragmentA;
FragmentB fragmentB;
FragmentC fragmentC;

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
        = new BottomNavigationView.OnNavigationItemSelectedListener() {

    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {

            case R.id.navigation_home:
                manager.beginTransaction().replace(R.id.testFrame, fragmentA).commit();
                return true;

            case R.id.navigation_dashboard:
                manager.beginTransaction().replace(R.id.testFrame, fragmentB).commit();
                return true;

            case R.id.navigation_notifications:
                manager.beginTransaction().replace(R.id.testFrame, fragmentC).commit();
                return true;

        }
        return false;
    }
};

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Log.w(TAG, "----- Activity: onCreate ------");
    manager = getSupportFragmentManager();

    fragmentA = new FragmentA();
    fragmentB = new FragmentB();
    fragmentC = new FragmentC();

    BottomNavigationView navigation = findViewById(R.id.navigation);
    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);

    manager.beginTransaction().add(R.id.testFrame, fragmentA).commit();

    findViewById(R.id.toActivity).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            startActivity(new Intent(MainActivity.this, SemiActivity.class));
        }
    });
}

收件人：

<li className="nav-item dropdown">

完整代码：

<li className="nav-item dropleft">

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

Answer 2

Dropleft，Dropup和Dropright解决方案在我的特定情况下不起作用。 “向右拉”或“向左拉”解决方案都没有。

我可以使用以下解决方案强制Dropdown放到特定坐标中：

.nav .dropdown{
  cursor: pointer;
  position: absolute;
  left: 88%;
  top: 30%;
}

.dropdown-menu{
  cursor: pointer;
  position: absolute !important;
  left: -8em;
  top: 3em;
}

使下拉按钮位于特定位置，并且下拉菜单完全按照我的期望进行拖放。对于较小的设备，我只是使用@media并放置了另一组规则以使下拉菜单正常工作。

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

2 个答案: