讓 bootstrap下拉菜單點選可以直接連結

01

只需添加禁用作為您的錨點上的一個類:
<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>

 

02

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的右上角。
第二種風格是在下拉列表的右側添加一些填充以放置插入符號,以防止重疊選單項的文字。
現在你有一個很好的響應選單項,看起來不錯,在桌面和手機版本,這是可點擊和可下拉菜單,這取決於您是點擊文字還是插入符號。

發表迴響