У меня есть раскрывающийся список 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>(Чтобы увидеть эффект, вам, вероятно, придется щелкнуть ссылку «Полная страница», чтобы окно результатов было достаточно широким, чтобы символ «@» не переходил влево.)
Bulma имеет возможность выровнять меню по правому краю, так что левая часть меню расширяется на страницу, делая его полностью видимым.
https://bulma.io/documentation/components/dropdown/#right-aligned < / а>
Как добиться того же эффекта в Buefy? Я считаю, что документы Buefy по примерам слишком лаконичны, но я подумал, что могу добавить «is-bottom-left» к элементу <b-dropdown>. Однако, как видно из фрагмента, это не имеет никакого эффекта.
Кроме того, когда страница сузится, значок раскрывающегося списка переместится в левую часть страницы. Предполагая, что указанная выше проблема решена, как в этом случае вернуть выравнивание меню к тому, что было (с выравниванием по левой стороне)?
