Question

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

在桌面上运行良好，但唯一的问题是移动视图中的箭头在崩溃时仍会显示（＆lt; 768px）。

.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: '';
}

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

Answer 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:'';
    }
}

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

1 个答案: