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功能，如果你的网站上有很多按钮，那么这个功能可能不会很快。

＆＃13;

＆＃13;

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";
};

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你的标记工作正常。确保你使用最新的3.x版本的Bootstrap，并没有其他CSS覆盖按钮样式。

http://www.codeply.com/go/YHfmz2wl4s