gpt4 book ai didi

How can I remove the arrow from drop down list in Bootstrap CSS?(如何从Bootstrap CSS的下拉列表中删除箭头?)

转载 作者:bug小助手 更新时间:2023-10-25 15:18:35 27 4
gpt4 key购买 nike



I am trying to remove the arrow that appears on a drop down menu in Twitter Bootstrap framework. Has anyone figured a way of removing the arrows?

我正在尝试删除Twitter Bootstrap框架中下拉菜单上显示的箭头。有没有人想出了移走箭的方法?


更多回答

I removed <b class="caret"></b> and the arrow is gone,that solved it.

我删除了,箭头消失了,这就解决了问题。

If you found your answer before it was posted, post it as an answer below and approve it to close this thread, that way it can help future users as well.

如果你在帖子发布之前找到了你的答案,请在下面以答案的形式发布,并批准它来关闭这个帖子,这样也可以帮助未来的用户。

@Andres,the think with memebers with less than 100 reps. they cant answer their own question before 8 hours are over.I have accepted an answer,thanks for the pointer.

@安德烈斯,拥有不到100名代表的成员的思想。他们不能在8个小时之前回答自己的问题。我已经接受了答案,谢谢你的指点。

优秀答案推荐

Removing the caret class from the link removes the arrow from the navigation bar,

从链接中移除插入符号类将从导航栏中移除箭头,



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


Will remove the little tab from the drop down menu its self.

将从其自身的下拉菜单中删除小选项卡。



From: https://getbootstrap.com/2.3.2/components.html#buttonDropdowns

出发地: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>


If you remove <span class="caret"></span> the arrow is not shown.

如果删除,则不会显示箭头。



Tried it using the dev. console in Chrome, and seems to work.

使用开发人员进行了尝试。在Chrome中的控制台,似乎可以工作。



If you copy an existing Bootstrap dropdown example, the menu button tag looks something like this:

如果复制现有的Bootstrap下拉示例,则菜单按钮标记如下所示:



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


Removing the dropdown-toggle class removes the arrow (or caret):

删除下拉切换类将删除箭头(或插入符号):



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


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


Just remove border-bottom from dropdown-menu will remove arrow from the navigation bar.

只需从下拉菜单中删除边框-底部-菜单将从导航栏中删除箭头。



.navbar .nav > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu:after{
border-bottom: none;
}


I've found the best solution is to add overflow:hidden; to .dropdown-menu

我发现最好的解决方案是将Overflow:Hidden;添加到.Dropdown-Menu



Use dropdown-bs-toggle instead of dropdown-toggle

使用DROPDOWN-BS-TOGTOGLE而不是DROPDOWN-TOGTOGER



add .dropdown-toggle-split class in the tag

在标记中添加.Dropdown-Togger-Split类



The only thing that worked for me was that I removed class="caret" if you are using bootstrap dropdown. Hope this work for you too.

唯一对我起作用的是,如果您使用的是Bootstrap Dropdown,我删除了class=“脱字符”。希望这对你也有效。



In Bootstrap4 remove "dropdown-toggle" class from "a" element.

在Bootstrap4中,从“a”元素中删除“DropDown-Togger”类。


更多回答

I was force to add the !important flag to override the bootstrap settings. There's quite a few layers of specificity on the original declaration.

我是被迫加的!重要标志来覆盖引导设置。原始声明中有很多细节。

You are not forced to add !important. Just make your rules more specific than the bootstrap ones.

你不是被迫添加的!重要的是。只是让你的规则比自举的规则更具体。

@TahirAlvi Done. In the future, feel free to update links without notifying the author.

@TahirAlvi完成。以后,您可以随时更新链接,而不会通知作者。

I used this solution to prevent the caret from showing up in a side menu when the menu was collapsed against the side of the screen. +1 for a simple solution.

我使用这个解决方案来防止当菜单折叠到屏幕一侧时,插入符号出现在侧边菜单中。+1表示简单的解决方案。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com