Выровняйте по правому значку внутри выпадающего меню Bulma.

Question

Как правильно выровнять по правому краю иконки внутри Bulma navbar-dropdown?

Я создал этот Codepen на основе Документы :

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
      More
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        About
        <span class="icon">
          <i class="fas fa-home"></i>
        </span>       
      </a>
      <a class="navbar-item">
        Jobs
        <span class="icon">
          <i class="fas fa-briefcase"></i>
        </span>       
      </a>
      <a class="navbar-item">
        Contact
        <span class="icon">
          <i class="fas fa-envelope"></i>
        </span>       
      </a>
      <hr class="navbar-divider">
      <a class="navbar-item">
        Report an issue
      </a>
    </div>
  </div>
</div>

но я не могу заставить значки перемещаться вправо, таким образом:

Answer 1

Вы будете хотеть использовать уровень Булмы для того, что вы пытаетесь достичь. Это был единственный способ, которым я смог заставить его работать с добавлением одного фрагмента пользовательского CSS.

Вот как будет выглядеть navbar-item образец:

<a class="navbar-item">
  <div class="level is-mobile">
    <div class="level-left">
      <span class="level-item">About</span>
    </div>
   <div class="level-right">
     <span class="icon level-item">
       <i class="fas fa-home"></i>
     </span>      
   </div>
  </div>
</a>

Обратите внимание на структуру класса level и затем используйте level-left и left-right в качестве дочерних классов. Также стоит отметить, что я использовал класс is-mobile для дружественного просмотра с мобильных устройств (значки с выравниванием по правому краю). Вы также можете отредактировать navbar-item по умолчанию padding-right, чтобы выровнять значок вправо. Последний шаг - увеличить ширину класса level по умолчанию, выполнив:

.level {
  width: 100%;
}

Я обновил ваш Codepen рабочим примером .

Рабочий стол:

* * 1030

Мобильный просмотр: