Question

我有一个bootstrap 4导航栏菜单：

foreach (DataListItem dli in DataList1.Items)
{
    Label Label2 = (Label)dli.FindControl("Label2");

    TextBox1.Text = TextBox1.Text + " " + Label2.Text;
}

通常情况下，点击下拉菜单会打开。它适用于移动设备，但我希望它在悬停大屏幕时打开。因此，当导航栏菜单折叠时，它应该在点击时打开，但如果不是，它应该在悬停时打开。我怎样才能做到这一点？

Answer 1

尝试这个我认为它的工作

显示：阻止！重要;

如果它不起作用，请使用JavaScript悬停属性

Answer 2

您可以通过简单地实现css来实现它。首先定义一个大于移动设备的媒体查询，然后像这样应用你的css：

   @media (min-width: 544px) {  
     .dropdown:hover>.dropdown-menu {
        display: block;
    }
    .dropdown>.dropdown-toggle:active {
        pointer-events: none;
    }
   }

它的下拉菜单会在悬停时扩展，仅限大屏幕（超过544像素）

请查看演示Here

Answer 3

对@ {1}}的断点使用@media查询：

navbar-expand-lg

https://www.codeply.com/go/uFPbKuv8GO

Answer 4

这里给出的答案的基本部分是：

@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

这有效，但是有缺陷。假设您将鼠标悬停在.dropdown上。出现.dropdown菜单。将鼠标放到.dropdown菜单中时，如果没有足够快地移动鼠标，它将关闭，因为在.dropdown和.dropdown菜单之间的边界处失去了“悬停”条件。

可以通过向上拖动.dropdown-menu的位置来解决此问题，因此不会丢失“悬停”条件的边界。

.dropdown-menu的默认boostrap位置是top: 100%。如下重写：

@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        top: 95%; 
    }
}

这样，即使用户将鼠标缓慢移入下拉菜单，下拉菜单也保持打开状态。

Bootstrap：navbar：悬停时打开？

4 个答案: