Приложение activJS с навигационной панелью неправильно выравнивает пункты выпадающего меню - PullRequest
Новая
       33

Приложение activJS с навигационной панелью неправильно выравнивает пункты выпадающего меню

0 голосов
/ 01 октября 2019

У меня есть приложение activJS, которое включает навигационную панель navbar. Первоначальный вид показывает значок меню из трех строк в верхнем правом углу, что я и хочу. Это выглядит так:

enter image description here

Когда я нажимаю на значок меню, раскрывающийся список выглядит так: enter image description here

Я пытаюсь получить выпадающий список для выравнивания пунктов меню справа, а не слева. Вот код, который генерирует панель навигации: 

<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 в имени класса потянет элементы вправо. Наверное, нет.

Есть предложения?

Спасибо.

1 Ответ

1 голос
/ 01 октября 2019

Я пытаюсь получить раскрывающийся список для выравнивания пунктов меню вправо, а не влево.

Вы можете использовать flexbox для достижения этого макета.

Примерно так должно работать: 

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