对齐Buefy下拉菜单，避免切掉侧面
对齐Buefy下拉菜单，避免切掉侧面
提问于 2018-10-13 13:00:09
我有一个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 ---></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>
(要查看效果，您可能必须单击Full Page链接以获得足够宽的结果窗口，以便"@“不会在左侧换行。)
Bulma能够右对齐菜单，使菜单的左侧延伸到页面中，使其完全可见。
https://bulma.io/documentation/components/dropdown/#right-aligned
如何在Buefy中获得相同的效果？我发现Buefy by-example文档过于简洁，但我想我可以在<b-dropdown>元素中添加"is-bottom-left“。然而，正如代码片段所示，这没有任何效果。
此外，当页面缩小时，下拉图标将重新定位到页面的左侧。假设上面的问题已经解决了，在这种情况下，如何将菜单对齐方式恢复到原来的状态(左侧对齐方式)？
回答 1
Stack Overflow用户
发布于 2018-12-17 14:12:29
<b-dropdown class="is-right">
...
</b-dropdown>只需在b-dropdown元素上使用“is-right”类
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52789687
复制相关文章
相似问题
腾讯云开发者
