Неверная высота группы кнопок разбивки 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++) { 
 
\t var buttonsIntHeight = buttons[i].clientHeight; 
 
    
 
\t if (buttonsIntHeight > buttonsAfterHeight) { 
 
    \t buttonsAfterHeight = buttonsIntHeight; 
 
    } 
 
}; 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
\t 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>

Answer 2

Ты Разметка работает отлично. Убедитесь, что вы используете последнюю версию Bootstrap версии 3.x, и нет другого CSS, переопределяющего стили кнопок.

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