在较小的屏幕上查看时删除顶部箭头

Question

在我的引导主题中，我在下拉菜单中添加了一个向上箭头

使用以下css

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  right: 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;
 right: 10px;
 display: inline-block;
 border-right: 6px solid transparent;
 border-bottom: 6px solid #ffffff;
 border-left: 6px solid transparent;
 content: '';
}

问题在于，当我缩小浏览器窗口以检查它在移动设备中的样子时，我看到箭头仍然存在，看起来不太好。如何使箭头响应，以便它不会显示在较小的显示器上。

Answer 1

您应该可以使用media query执行此操作。在bootstrap css文件中可能已经为您设置了一个或多个。您可以a）覆盖浏览器视口低于某个宽度（使用display: none;或类似值）时的样式，或者b）使箭头仅在浏览器视口高于某个宽度时显示。我认为后者是更好的方式。要添加媒体查询，请按照以下方式包装样式规则：

@media (min-width: 768px) {
    .dropdown-menu:after {
        position: absolute;
        [...]
    }
}

您可能需要调整宽度，但我们的想法是，只有在视口宽度至少为768px时才会应用规则。