我正在寻找使用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规则。
答案 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>