没有文字的下拉菜单

Question

我想实现这样的效果：

我想要一个向下的下拉箭头，并且在它前面留空 space。我还想让选项正好显示在下面，如下所示。

到目前为止我试过这个：

<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>

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

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

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>

DEMO

没有文字的下拉菜单

Dropdown with no text

vue.js

bootstrap-4