vue.js - 没有文字的下拉菜单

Question

我想达到这个效果：

我想要一个向下的下拉箭头，并且在它之前有一个空白空间。我还希望选项完全显示在下面，如此处所示。

到目前为止，我已经尝试过：

<div>
  <b-dropdown id="dropdown-right" text="&#160;&nbsp;" class="m-2">
    <b-dropdown-item>Phone Number</b-dropdown-item>
    <b-dropdown-item>Email</b-dropdown-item>
    <b-dropdown-item>DeviceToken</b-dropdown-item>
  </b-dropdown>
</div>

我试图用空格填充它，ASCI 代码是 or 。这些都不起作用。这可视化为：

请帮助我在这上面花了几个小时，我被困住了。我也尝试过不同的引导元素，但没有成功。

标签： vue.jsbootstrap-4

Answer 1

在文本内您不能添加 ASCI 代码。你可以这样做，

<div id="app">
  <b-dropdown id="dropdown-right" class="m-2 col-5">
    <b-dropdown-item>Phone Number</b-dropdown-item>
    <b-dropdown-item>Email</b-dropdown-item>
    <b-dropdown-item>DeviceToken</b-dropdown-item>
  </b-dropdown>
</div>

演示