Twitter Bootstrap 3 - 在仅桌面的下拉菜单上添加箭头

Posted 2023-04-13

【中文标题】Twitter Bootstrap 3 - 在仅桌面的下拉菜单上添加箭头

【英文标题】：Twitter Bootstrap 3 - Add Arrow on Dropdown Menu for Desktop Only

【发布时间】：2014-04-24 21:19:12

【问题描述】：

所以我用这个方法来添加我的箭头：bootstrap 3 arrow on dropdown menu

在桌面上效果很好，但唯一的问题是箭头在折叠时仍然出现在移动视图中（

演示：http://jsfiddle.net/nolabel/Mk9PD/

.navbar-nav>li>.dropdown-menu, ul.dropdown-menu 
    border: 5px solid #7ed1e3;
    border-radius: 10px;

.dropdown-menu:after 
  position: absolute;
  top: -16px;
  left: 24%;
  display: inline-block;
  border-right: 11px solid transparent;
  border-bottom: 11px solid #7ed1e3;
  border-left: 11px solid transparent;
  content: '';

.dropdown-menu:before 
  position: absolute;
  top: -17px;
  left: 25%;
  display: inline-block;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #ccc;
  border-left: 12px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';

解决此问题的最佳方法是什么？

【问题讨论】：

下拉列表中的内容应该如何处理？它们是否应该仍然存在并且只是箭头消失？

sebastian_oe，它应该像正常显示一样显示。 Juan C. 得到了一个很好的解决方案。

【参考方案1】：

您可以将您的 :before 和 :after 放入媒体查询中，并使用您希望仅显示的设备 width

demo

@media screen and (min-width:750px) 
    .dropdown-menu:after 
        position: absolute;
        top: -16px;
        left: 24%;
        display: inline-block;
        border-right: 11px solid transparent;
        border-bottom: 11px solid #7ed1e3;
        border-left: 11px solid transparent;
        content:'';
    
    .dropdown-menu:before 
        position: absolute;
        top: -17px;
        left: 25%;
        display: inline-block;
        border-right: 12px solid transparent;
        border-bottom: 12px solid #ccc;
        border-left: 12px solid transparent;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        content:'';
    

【讨论】：

不知道为什么你被否决了，但这个解决方案有效！我试图使用响应式实用程序类，但非常不成功。

Juan，使用 min-width:768px 比使用 750px b/c 更正确，导航折叠 @767px。