对齐 Buefy 下拉菜单以避免切边答案

【问题标题】：Aligning Buefy dropdown menu to avoid chopping off side对齐 Buefy 下拉菜单以避免切边
【发布时间】：2018-10-13 05:00:08
【问题描述】：

我从位于我页面的右侧。当我激活它时，生成的菜单的左侧是对齐的图标和菜单的右侧，比图标，从页面向右延伸并尽可能被切掉在这里可以看到：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet"/>
    <div id="app" class="container-fluid">
      <section class="section">
        <div class="columns">
          <div class="column">Some info with dropdown menu at right ---&gt;</div>
          <div class="column is-narrow">
            <b-dropdown hoverable is-bottom-left>
              <i class="is-info" slot="trigger">@</i>
              <b-dropdown-item>Action</b-dropdown-item>
              <b-dropdown-item>Another action</b-dropdown-item>
              <b-dropdown-item>Something else</b-dropdown-item>
              </b-dropdown>
            </div>
          </div>
        </section>
      </div><!--#id="app"-->
  <script>
    const app = new Vue()
    app.$mount('#app')
    </script>

（要查看效果，您可能需要单击获取结果窗口的整页链接足够宽，以至于“@”不会绕到左侧。）

Bulma 能够右对齐菜单，以便左侧的菜单延伸到页面中，使其完全可见。

https://bulma.io/documentation/components/dropdown/#right-aligned

如何在 Buefy 中获得相同的效果？我找到了 Buefy 示例文档过于简洁，但我想我可以添加“is-bottom-left”到 <b-dropdown> 元素。但正如 sn-p 所示，这没有任何效果。

此外，当页面缩小时，下拉图标将重新定位到页面的左侧。假设上述问题有解决方案，如何将菜单对齐返回到原来的状态（左侧对齐）这种情况？

【问题讨论】：

标签： bulma buefy

【解决方案1】：

<b-dropdown class="is-right">
    ...                             
</b-dropdown>

只需在 b-dropdown 元素上使用“is-right”类

【讨论】：