bootstrap table toolbar 不能下拉問題解決

導入包

<link rel="stylesheet" href="bootstrap/css/bootstrap.css" target="_blank" rel="external nofollow" >
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.css" target="_blank" rel="external nofollow" >
    <link href="bootstrap/css/bootstrap-table.css" target="_blank" rel="external nofollow"  rel="stylesheet">
    <script src="bootstrap/jquery-3.5.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/bootstrap-table.js"></script>
           

html結構

<div id="toolbar" class="btn-group"...> //toolbar 
<table id="agent-table"> //bootstrap table
</table>
           

style

主要設定
toolbar = ''#toolbar''
           

問題

今天初學bootstrap使用, 下拉菜單一旦id設定為"toolbar" 立馬不能下拉.

原因

設定id = “toolbar” 時 隻給button-dropdown設定了,而沒有給dropdown-menu設定

解決方法

将id 設定 放在包含button 和 和 dropdown-menu 的div裡就好(相當于給兩者同時設定為toolbar)

<div id="toolbar" class="btn-group" >
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		預設
		<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
                    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >bt1</a></li>
                    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >bt2</a></li>
                    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >bt3</a></li>
    </ul>
</div>