允许点击twitter引导下拉切换链接？
我们已经设置了twitter引导下拉菜单来进行hover（而不是点击[是的，我们知道在触摸设备上没有hover]）。 但是我们希望能够让我们的主要链接工作，当我们点击它。
默认情况下，twitter bootstrap阻止它，所以我们如何重新启用它？
只需在你的主播上添加禁用的类：
<a class="dropdown-toggle disabled" href="http://google.com"> Dropdown <b class="caret"></b></a> 所以在一起的东西就像：
<ul class="nav"> <li class="dropdown"> <a class="dropdown-toggle disabled" href="http://google.com"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> </ul>
对于那些抱怨“子菜单不下来”的人，我这样解决了，这对我来说看起来很干净：
1）除了你的
<a class="dropdown-toggle disabled" href="http://google.com"> Dropdown <b class="caret"></b> </a>
把一个新的
<a class="dropdown-toggle"><b class="caret"></b></a>
并移除<b class="caret"></b>标签，所以它看起来像
<a class="dropdown-toggle disabled" href="http://google.com"> Dropdown</a><a class="dropdown-toggle"><b class="caret"></b></a>
2）样式他们与以下的CSS规则：
.caret1 { position: absolute !important; top: 0; right: 0; } .dropdown-toggle.disabled { padding-right: 40px; }
.caret1类中的风格是将它完全放置在您的li的右侧。
第二种方式是在下拉列表的右侧添加一些填充字符，以防止重叠菜单项的文本。
现在你有一个很好的响应菜单项，在桌面和移动版本看起来不错，这是可以点击和下拉取决于你是否点击文字或插入符号。
由于没有真正的答案是有效的（select的答案禁用下拉列表），或使用JavaScript覆盖，在这里。
这是所有的HTML和CSS修复（使用两个<a>标签）：
<ul class="nav"> <li class="dropdown dropdown-li"> <a class="dropdown-link" href="http://google.com">Dropdown</a> <a class="dropdown-caret dropdown-toggle"><b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> </ul>
现在这里是你需要的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; }
假设你希望这两个<a>标签在任何一个hover处突出显示，你还需要重写引导程序，你可以使用下面的代码：
.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*/ }
我不确定将顶级锚点元素设置为可点击的锚点的问题，但这里是使桌面视图具有hover效果以及移动视图保持其可点击能力的最简单的解决scheme。
// Medium screens and up only @media only screen and (min-width: $screen-md-min) { // Enable menu hover for bootstrap // dropdown menus .dropdown:hover .dropdown-menu { display: block; } }
这样移动菜单仍然按照它应该的方式运行，而桌面菜单将在hover时而不是点击时展开。
另一种解决scheme就是从定位点中删除“dropdown-toggle”类。 点击后不再会触发dropwon.js，所以你可能想让子菜单显示在hover状态。
你可以使用JavaScript snippit
$(function() { // Enable drop menu clicks $(".nav li > a").off(); });
这将解除阻止url更改的点击事件。
这是一个从数据hover切换到数据切换取决于屏幕宽度的小黑客：
/** * Bootstrap nav menu hack */ $(window).on('load', function () { // On page load if ($(window).width() < 768) { $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown'); } // On window resize $(window).resize(function () { if ($(window).width() < 768) { $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-hover').attr('data-toggle', 'dropdown'); } else { $('.navbar-nav > li > .dropdown-toggle').removeAttr('data-toggle').attr('data-hover', 'dropdown'); } }); });
