Question

我正在使用Bootstrap 4.我尝试删除下拉列表中的箭头。

我为Bootstrap 3找到的answers不再起作用了。

jsfiddle是here。

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

Answer 1

使用css，你可以这样做：

.dropdown-toggle::after {
    display:none;
}

Answer 2

只需从元素中删除“dropdown-toggle”类。如果您具有以下数据切换属性，则下拉列表仍然有效

<button role="button" type="button" class="btn" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

覆盖.dropdown-toggle类样式会影响所有下拉菜单，您可能希望将箭头保留在其他按钮中，这就是为什么这看起来是最简单的解决方案。

编辑：如果要保留边框样式，请保留下拉类

<button role="button" type="button" class="btn dropdown" data-toggle="dropdown"> 
    Dropdown Without Arrow
</button>

Answer 3

我不推荐任何现有答案，因为：

.dropdown-toggle具有更多样式，而不仅仅是插入符号。从元素中删除类会导致styling issues。
覆盖.dropdown-toggle没有意义。仅仅因为你不需要对某个特定元素进行插入，并不意味着你以后不会需要它。
::after不涵盖dropdown variants（部分使用::before）。

改为使用自定义.caret-off类：

.caret-off::before {
    display: none;
}
.caret-off::after {
    display: none;
}

Answer 4

删除＆＃34;下拉切换＆＃34;类

Answer 5

如果您有兴趣用另一个Icon（例如FontAwesome）替换箭头，您只需要删除伪元素.dropdown-toggle上的边框

.dropdown-toggle::after { border: none; }

Answer 6

我在我的项目中使用了已接受的答案已有一段时间但刚刚偶然发现了variable used by bootstrap：

$enable-caret: true !default;

如果将此设置为false，则将删除插入符，而无需执行任何自定义代码。

我的项目是Ruby / Rails所以我使用的是bootstrap-rubygem。我在custom-variables.scss BEFORE application.scss文件/文件中导入bootstrap.scss并将上述变量设置为false，从而更改了变量。

Answer 7

Boostrap使用CSS边框生成此代码：

.dropdown-toggle:after {
  border: none;
}

Answer 8

如果您按以下方式删除fit dropdown-toggle类，则系统上的所有下拉按钮将不再具有插入符号。

.dropdown-toggle::after {
    display:none;
}

但是也许这不是您想要的，所以要删除特定按钮，我们将插入一个名为：remoecaret的类，我们将对该类进行拟合：dropdown-toggle，如下所示：

.removecaret.dropdown-toggle::after {
    display: none;
}

，我们的html看起来像这样：

<div class="btn-group">
  <button class="btn btn-outline-secondary btn-sm dropdown-toggle removecaret" data-toggle="dropdown">
    <i class="fa fa-bars" aria-hidden="true"></i>
  </button>
  <ul class="dropdown-menu dropdown-menu-right">
    <li><a href="#"><a href="#"><i class="fa fa-cog" aria-hidden="true"></i>&nbsp;Edit</a></li>
  </ul>
</div>

Answer 9

.dropdown-toggle::after { 
 content: none; 
 }

您也可以尝试

Answer 10

如果您只想在此引导按钮类中输入，请进行以下操作：

public class RateResponse
{

    [JsonProperty("scac")]
    public string scac { get; set; }

    [JsonProperty("service")]
    public string service { get; set; }

    [JsonProperty("service_human")]
    public string service_human { get; set; }

    [JsonProperty("carrier")]
    public string carrier { get; set; }

    [JsonProperty("carrier_human")]
    public string carrier_human { get; set; }

    [JsonProperty("estimated_transit_days")]
    public int estimated_transit_days { get; set; }

    [JsonProperty("cost")]
    public string cost { get; set; }
}

public class RateResponseError
{

    [JsonProperty("carrier")]
    public string carrier { get; set; }

    [JsonProperty("message")]
    public string message { get; set; }
}

public class RootObject
{

    [JsonProperty("success")]
    public bool success { get; set; }

    [JsonProperty("rate_response")]
    public IList<RateResponse> rate_response { get; set; }

    [JsonProperty("rate_response_errors")]
    public IList<RateResponseError> rate_response_errors { get; set; }

    [JsonProperty("pick_ticket_number")]
    public string pick_ticket_number { get; set; }
}


}

Answer 11

在下拉切换类声明中添加无箭头

Answer 12

您在课程中尝试过tag =“ a”吗？它隐藏了箭头而没有进一步的CSS。

Answer 13

这适用于bootsrap4和ng-bootstrap。

.dropdown-toggle:after {
    display: none;
}

如何删除Bootstrap 4中的下拉箭头？

13 个答案: