Выпадающее меню выпадающего меню Bootstrap не соответствует стилям по умолчанию?

Question

Есть ли ошибка в bootstrap CSS? Я пытаюсь использовать раскрывающееся меню начальной загрузки bootstrap с кнопкой разделения, но кнопка со стрелкой вниз в сторону намного короче, чем фактическое меню.

Я думал, что это был некоторый дублирующий вопрос стиля в моем коде, но мне удалось воспроизвести это, используя только код boostrap в JSFiddle.

<div class="btn-group"> 
    <button type="button" class="btn btn-danger">Action</button> 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    <span class="sr-only">Toggle Dropdown</span> 
    </button> 
    <div class="dropdown-menu"> 
    <a class="dropdown-item" href="#">Action</a> 
    <a class="dropdown-item" href="#">Another action</a> 
    <a class="dropdown-item" href="#">Something else here</a> 
    <div class="dropdown-divider"></div> 
    <a class="dropdown-item" href="#">Separated link</a> 
    </div> 
</div> 

Answer 1

структура по умолчанию в раскрывающемся списке использует неупорядоченный список (UL), и вы также занимаетесь классом caret.

См docs

<ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li> 
</ul> 

Рабочий пример:

body { 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!-- Split button --> 
 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-danger">Action</button> 
 
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
    <span class="caret"></span> 
 
    <span class="sr-only">Toggle Dropdown</span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">Action</a> 
 
    </li> 
 
    <li><a href="#">Another action</a> 
 
    </li> 
 
    <li><a href="#">Something else here</a> 
 
    </li> 
 
    <li role="separator" class="divider"></li> 
 
    <li><a href="#">Separated link</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

это произошло из-за ваш диапазон тега имеет класс стер только и этот класс имеет фиксированную ширину и высоту 1px в booststrap.css

.sr-only { 
position: absolute; 
width: 1px; 
height: 1px; 
padding: 0; 
margin: -1px; 
overflow: hidden; 
clip: rect(0, 0, 0, 0); 
border: 0; 
}