css - 带有导航栏的 reactJS 应用程序不能正确对齐下拉菜单项

Question

我有一个 reactJS 应用程序，其中包含用于导航的导航栏。初始视图在右上角显示了我想要的 3 行菜单图标。它看起来像这样：

当我单击菜单图标时，下拉菜单如下所示：

我试图让下拉菜单项向右对齐，而不是向左对齐。这是生成导航栏的代码：

<div className="collapse navbar-collapse" id="navbarSupportedContent">
    <ul className="nav navbar-nav pullRight">
        <li className="nav-item">
            <a className="nav-link menuItemColor" onClick={this.accountinformation}>Basic Account Information</a>
        </li>
        <li className="nav-item">
            <a className="nav-link menuItemColor" onClick={this.contributions}>Contributions</a>
        </li>
        <li className="nav-item">
            <a className="nav-link menuItemColor" onClick={this.investmentelections}>Investment Elections</a>
        </li>
        <li className="nav-item">
            <a className="nav-link menuItemColor" onClick={this.beneficiary}>Beneficiary Information</a>
        </li>
        <li className="nav-item">
            <a className="nav-link menuItemColor" onClick={this.transfer}>Transfers</a>
         </li>
         <li className="nav-item">
             <a className="nav-link menuItemColor" onClick={this.loans}>Loans</a>
         </li>
         <li className="nav-item">
             <a className="nav-link menuItemColor" onClick={this.transactionhistory}>Transaction History</a>
         </li>
         <li className="nav-item">
             <a className="nav-link menuItemColor" onClick={this.documents}>Documents</a>
         </li>
         <li class="active">
             <a className="nav-link menuItemColor" onClick={this.logout}>Logout</a>
         </li>
     </ul>
 </div>

我认为将 pullRight 放在类名中会将项目拉到右侧。我猜不会。

有什么建议么？

谢谢你。

标签： cssreactjstwitter-bootstrapnavbar

Answer 1

我试图让下拉菜单项向右对齐，而不是向左对齐。

您可以使用flexbox该布局来实现。

像这样的东西应该工作：

.pullRight .nav-item {
   display: flex;
   justify-content: flex-end;
}