在Bootstrap 3中,您可以轻松地从下拉按钮中删除“插入符号”(指向下方的小箭头),但我无法看到如何在Bootstrap 4中执行此操作,因为它们不再使用<span class="caret"></span>
。
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
<div class="dropdown-menu">
<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 role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
答案 0 :(得分:14)
只需删除dropdown-toggle
!
这里是一个示例: https://jsfiddle.net/ydnosrLw/
答案 1 :(得分:8)
您可以通过从元素中删除dropdown-toggle
类来删除Bootstrap 4中的插入符号。所以代替这个:
<button class="btn btn-outline-secondary dropdown-toggle" ...>
您的按钮将会是
<button class="btn btn-outline-secondary" ...>
这不会有任何副作用,它仍然可以作为下拉菜单正常工作。
答案 2 :(得分:7)
它是在css中完成的。做那样的事情:
.dropdown-toggle:after { content: none }
答案 3 :(得分:1)
在Bootstrap 4中,您可以通过设置$enable-caret
sass变量false
来删除脱字号下拉按钮。但是,您必须在导入bootstrap sass文件之前设置此变量。
// Your variable overrides
$enable-caret: false
// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";