twitter-bootstrap Bootstrap 4 从下拉按钮中删除插入符号

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/48176321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-22 01:12:05  来源:igfitidea点击:

Bootstrap 4 remove caret from dropdown button

twitter-bootstrapbootstrap-4

提问by random_user_0891

In Bootstrap 3 you could easily remove the "caret" (small arrow that points down) from a dropdown button, I can't see how to do it in Bootstrap 4 though because they no longer use <span class="caret"></span>.

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

采纳答案by Alexandre Annic

It's done in css. Do something like that:

它是在 css 中完成的。做这样的事情:

.dropdown-toggle:after { content: none }

回答by Achmed Zuzali

Simply remove the dropdown-toggle!

只需删除dropdown-toggle

Here is an example: https://jsfiddle.net/ydnosrLw/

这是一个例子:https: //jsfiddle.net/ydnosrLw/

回答by Mohamed Nagieb

You can remove the caret in Bootstrap 4 by removing the dropdown-toggleclass from your element. So instead of this:

您可以通过dropdown-toggle从元素中删除类来删除 Bootstrap 4 中的插入符号。所以而不是这个:

<button class="btn btn-outline-secondary dropdown-toggle" ...>

Your button will be

你的按钮将是

<button class="btn btn-outline-secondary" ...>

This won't have any side affects and it will still function properly as a dropdown.

这不会有任何副作用,它仍然可以作为下拉菜单正常运行。

回答by Gaslan

In Bootstrap 4 you can remove caret form dropdown button by setting $enable-caretsass variable false. But you must set this variable before importing the bootstrap sass file.

在 Bootstrap 4 中,您可以通过设置$enable-caretsass 变量来删除插入符号形式的下拉按钮false。但是你必须在导入 bootstrap sass 文件之前设置这个变量。

// Your variable overrides
$enable-caret: false

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";