Bootstrap 下拉菜单三角形的奥秘是啥？

Posted 2023-03-06

【中文标题】Bootstrap 下拉菜单三角形的奥秘是啥？

【英文标题】：What's the mystery of the Bootstrap dropdown menu triangle?Bootstrap 下拉菜单三角形的奥秘是什么？

【发布时间】：2012-12-12 15:24:40

【问题描述】：

我试图了解 Twitter Bootstrap 下拉菜单包含在导航栏中和不包含在导航栏中时的区别。

当它们包含在导航栏中时，展开的菜单上会显示一个向上的三角形/箭头。不使用导航栏时不会显示此三角形：

http://twitter.github.com/bootstrap/javascript.html#dropdowns

我只花了两个小时探索 css/html，我还是不明白为什么......

有什么想法吗？

【问题讨论】：

能否添加两个场景的截图？

链接重定向到 Twitter Bootstrap 下拉文档页面。你可以看到两个场景都在运行：twitter.github.com/bootstrap/javascript.html#dropdowns

【参考方案1】：

只需将其添加到 CSS 中，您就可以使用下拉菜单箭头，而无需将下拉菜单放在导航栏内

.dropdown-menu:before 
   position: absolute;
   top: -7px;
   left: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #CCC;
   border-left: 7px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   content: '';
 

.dropdown-menu:after 
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
  

.dropdown-menu:before, .dropdown-menu.pull-right:before 
right: 12px;
left: auto;


.dropdown-menu::after, .dropdown-menu.pull-right:after 
right: 13px;
left: auto;

【参考方案2】：

三角形可以通过以下语法生成：

    <b class="caret dropdown-toggle"></b>

【讨论】：

不，插入符号是按钮文本旁边的倒三角形。我说的是扩展菜单气泡上的白色三角形。不过还是谢谢

【参考方案3】：

在导航元素内部时，下拉菜单有两种样式。它们如下：

.navbar .nav > li > .dropdown-menu::before 
   position: absolute;
   top: -7px;
   left: 9px;
   display: inline-block;
   border-right: 7px solid transparent;
   border-bottom: 7px solid #CCC;
   border-left: 7px solid transparent;
   border-bottom-color: rgba(0, 0, 0, 0.2);
   content: '';
 
 .navbar .nav > li > .dropdown-menu::after 
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
    border-left: 6px solid transparent;
    content: '';
  

他们在彼此的顶部创建了两个三角形，一个是浅灰色，另一个是深灰色。 如果您使用 chrome 开发人员工具，您可以检查这些元素并关闭不同的样式以了解它们在做什么。没有导航栏就不会应用这些样式