javascript - Bootstrap 拆分按钮组高度不正确

Question

使用 Bootstrap 的拆分按钮组时，浏览器输出存在一些问题。

考虑下面的 HTML:

<div class="btn-group btn-group-lg dropup">
    <button class="btn btn-primary">SQL Server</button>
    <button class="btn btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">C#</a></li>
        <li><a href="#">ASP.NET</a></li>
        <li><a href="#">ADO.NET</a></li> 
    </ul>
 </div>

当前输出:

预期输出:

Answer 1

由于您还没有发布所有代码，我制作了一个简单的 JS 函数，如果您的网站上有很多按钮，它可能不会很快。

var buttons = document.getElementsByTagName("button");
var buttonsAfterHeight = 0;

for (var i = 0; i < buttons.length; i++) {
	var buttonsIntHeight = buttons[i].clientHeight;
  
	if (buttonsIntHeight > buttonsAfterHeight) {
  	buttonsAfterHeight = buttonsIntHeight;
  }
};

for (var i = 0; i < buttons.length; i++) {
	buttons[i].style.height = buttonsAfterHeight + "px";
};

<div class="btn-group btn-group-lg dropup">

<button class="btn btn-primary">SQL Server</button>
<button class="btn btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
</button>
               <ul class="dropdown-menu">
    <li><a href="#">C#</a></li>
    <li><a href="#">ASP.NET</a></li>
                    <li><a href="#">ADO.NET</a></li> 
</ul>
 </div>