允许点击twitter bootstrap下拉切换链接？

我们设置了twitter bootstrap下拉列表来处理悬停(而不是点击[是的,我们知道没有悬停在触摸设备上]).但是我们希望能够在点击它时使主链接工作.

默认情况下,twitter bootstrap会阻止它,那么我们如何重新启用呢？

只需在您的锚点上将禁用添加为类:

    Dropdown 

总而言之:

    

        
            Dropdown 
        
        

            
Link 1
            
Link 2
        
    

     Dropdown 

把一个新的

并删除标签,所以它看起来像

Dropdown

2)使用以下css规则对它们进行样式设置:

.caret1 {
    position: absolute !important; top: 0; right: 0;
}

.dropdown-toggle.disabled {
    padding-right: 40px;
}

.caret1类的风格是将它放在你li的右下角.

第二种方式是在下拉列表的右侧添加一些填充以放置插入符,从而防止重叠菜单项的文本.

现在你有一个很好的响应式菜单项,它在桌面和移动版本中看起来都不错,并且可点击和可下拉,具体取决于你是单击文本还是插入符号.

由于没有真正的答案可行(选择的答案禁用下拉列表),或使用javascript覆盖,这里就是.

这是所有html和css修复(使用两个标记):

 

    Dropdown
    
    

        
Link 1
        
Link 2
    
 

现在这里是您需要的CSS.

.dropdown-li {
    display:inline-block !important;
}
.dropdown-link {
    display:inline-block !important; 
    padding-right:4px !important;
}
.dropdown-caret {
    display:inline-block !important; 
    padding-left:4px !important;
}

假设您希望两个标记在悬停任何一个时突出显示,您还需要覆盖引导程序,您可以使用以下内容:

.nav > li:hover {
    background-color: #f67a47; /*hover background color*/
}
.nav > li:hover > a {
    color: white; /*hover text color*/
}
.nav > li:hover > ul > a {
    color: black; /*dropdown item text color*/
}