Bulma导航栏下拉菜单内的右对齐图标

Question

在Bulma navbar-dropdown内右对齐图标的正确方法是什么？

我基于this Codepen创建了the docs：

<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

您将要使用布尔玛的level来完成所要完成的任务。这是我能够通过添加一个自定义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的{​​{1}}，以将图标的更多位置向右对齐。最后一步是通过执行以下操作来增加padding-right类的默认宽度：

level

我已使用有效的example更新了您的Codepen。

桌面视图：

移动视图：