将 buefy <b-dropdown> 元素设置为全宽

Question

如何更改项目以填充 100% 宽度？

找不到任何选项，而且我无法将 css 规则应用于 .dropdown-trigger 元素。

Answer 1

示例笔：https://codepen.io/Qumez/pen/RwPWeRV

b-dropdown 组件似乎是 div.dropdown -> div[role="button"] -> button 因此，通过为 div 及其子 div 和孙按钮提供 100% 的宽度，我能够让组件扩展到全宽。

<div class="dropdown-box">
  <b-dropdown aria-role="list">
    <button class="button is-primary" slot="trigger">
      <span>Click me!</span>
      <b-icon icon="menu-down"></b-icon>
    </button>

     <!-- b-dropdown-items -->
  </b-dropdown>
</div>

.dropdown-box {
    border: 2px solid red;
    div, button {
        width: 100%;
    }
}

将 buefy <b-dropdown> 元素设置为全宽

Set buefy <b-dropdown> element to full width

vue.js

buefy