1

我从页面右侧的图标触发了 Buefy 下拉菜单。当我激活它时，生成的菜单左侧与图标对齐，菜单右侧比图标宽，从页面向右延伸并被切断，如下所示：

<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 示例文档过于简洁，但我认为我可以在 <b-dropdown>元素中添加“is-bottom-left”。正如片段所示，这没有任何效果。

此外，当页面缩小时，下拉图标将重新定位到页面的左侧。假设上述问题已得到修复，在这种情况下，如何将菜单对齐恢复到原来的状态（左侧对齐）？

4

1 回答 1

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

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

于 2018-12-17T06:12:29.380 回答