Bulma navbar-dropdown 中的右对齐图标

Question

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

<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

您将要使用 Bulma 的 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 class 的结构，然后使用 level-left 和 left-right 作为子 classes。还需要注意的是，我使用了 is-mobile class 作为移动友好视图（右对齐图标）。您还可以编辑默认 navbar-item 的 padding-right 以将图标的 more 靠右对齐。最后一步是增加 level class 的默认宽度，方法是：

.level {
  width: 100%;
}

我已经更新了你的 Codepen，可以使用 example。

桌面视图：

手机浏览：

Bulma navbar-dropdown 中的右对齐图标

Right align icons inside Bulma navbar-dropdown

bulma