内联使用Bootstrap v4选择文本

时间:2017-08-29 18:39:35

标签: css dropdown bootstrap-4

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

enter image description here

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

<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规则。

2 个答案:

答案 0 :(得分: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>
    

答案 1 :(得分:0)

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