logo标签列表

如何在Bootstrap CSS中删除下拉列表中的箭头？

twitter-bootstrap
12

我想要去掉 Twitter Bootstrap 框架下拉菜单中的箭头。有人找到了移除箭头的方法吗？

4
我删除了<b class="caret"></b>，箭头就不见了，问题解决了。 - Gandalf
如果您在帖子发布之前找到了答案，请在下面发布答案并批准它以关闭此线程，这样它也可以帮助未来的用户。 - Andres Ilich
@Andres，对于声望不到100的用户，他们需要等待8个小时后才能回答自己的问题。我已经接受了一个答案，感谢你的指引。 - Gandalf
10个回答
26

从链接中移除caret类可以将导航栏中的箭头去掉。

.dropdown-menu::before, 
.dropdown-menu::after {
    border: none;
    content: none;
}

将从下拉菜单本身中移除小标签。

2
我被迫添加!important标志来覆盖Bootstrap设置。原始声明中有相当多的特异性层次。 - Lotus
你不强制添加 !important。只需使您的规则比引导程序规则更具体即可。 - A1rPun
22

来源：https://getbootstrap.com/2.3.2/components.html#buttonDropdowns

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

如果删除 <span class="caret"></span>，箭头将不会显示。

在Chrome的开发者控制台中尝试了一下，看起来有效。

@TahirAlvi 完成。将来，您可以随意更新链接而无需通知作者。 - chb
4
如果您复制了一个现有的Bootstrap下拉菜单示例，则菜单按钮标签看起来像这样：

<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Menu Name</button>

移除 dropdown-toggle 类会去掉箭头（或小三角）：

<button class="btn btn-primary" type="button" data-toggle="dropdown">Menu Name</button>
3
.dropdown-toggle::after{
    display: none;
}
2
只需从下拉菜单中移除 border-bottom，就能从导航栏中移除箭头。
.navbar .nav > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu:after{
    border-bottom: none;
}
1

我发现最好的解决方法是在.dropdown-menu中添加overflow:hidden;

我使用了这个解决方案，以防止当菜单折叠在屏幕边缘时，插入符号出现在侧边菜单中。对于一个简单的解决方案点赞。 - Caveman
0
使用dropdown-bs-toggle而不是dropdown-toggle
-1
在Bootstrap4中，从“a”元素中删除“dropdown-toggle”类。
-1
在标签中添加 .dropdown-toggle-split 类。
-1
唯一对我有用的是，如果您正在使用Bootstrap下拉菜单，则删除class="caret"。希望这对您也有用。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接