Question

我有一个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>

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

布尔玛具有使菜单右对齐的功能，以便左侧菜单的内容延伸到页面中，使其完全可见。

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

我如何在Buefy中获得相同的效果？我找到了Buefy的示例文档过于简洁，但我认为我可以在“ is-bottom-left”后面加上 <b-dropdown>元素。如摘要所示，该操作无效。

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

Answer 1

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

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

对齐Buefy下拉菜单，避免切掉侧面

1 个答案: