如何使Bootstrap Dropdown图标和文本在边缘上？

Question

我不知道为什么我的下拉菜单会这样居中它的孩子：

这是我的期望

这是我来自https://bootstrap-vue.js.org/docs/components/dropdown/#dropdowns的代码

   <b-dropdown style="width: 200px" text="Period" variant="outline-dark" >
        <b-dropdown-item href="#">An item</b-dropdown-item>
        <b-dropdown-item href="#">Another item</b-dropdown-item>
    </b-dropdown>

Answer 1

尽管应该可以这样工作，但是您可以通过以下CSS实现您想要的：

.btn.dropdown-toggle {
     display: flex;
     align-items: center;
     justify-content: space-between;
}