内联使用Bootstrap v4选择文本

Question

我正在寻找使用Bootstrap v4的以下内联下拉列表：

我尝试了很多案例，而到目前为止最接近的案例是：

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

问题如你所见，切换器不应该是一个按钮，它可能是跨度..我们需要添加它以达到类似于上面的截屏视频的css规则。

Answer 1

知道了！

• 将d-inline-flex添加到容器中。

• 按span和amp;更改按钮删除btn class＆amp;添加font-weight-bold类。

    <div class="dropdown d-inline-flex">
      Show me posts by: <span class="dropdown-toggle font-weight-bold"id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </span>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  

Answer 2

使用data-toggle="dropdown" 任何元素触发下拉列表。

https://www.codeply.com/go/oYI9nZEWBy

  <h4 data-toggle="dropdown">
        Open Dropdown
  </h4>
  <ul class="dropdown-menu">
       <a class="dropdown-item" href="#">
           ...
       </a>
  </ul>