Ошибка при выпуске кнопки выпадающего меню Полная ширина

Question

Можете ли вы посмотреть эту демонстрационную версию и сообщить мне, почему я не могу изменить ее с .dropdown-menu?

Пожалуйста, проверьте код в полноэкранном режиме

jQuery(document).ready(function(){ 
 
    $(".btn-group").hover(
 
     function() { $('.dropdown-menu', this).stop().fadeIn("slow"); 
 
     }, 
 
     function() { $('.dropdown-menu', this).stop().fadeOut("fast"); 
 
    }); 
 
});

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"); 
 
.dropdown-menu { 
 
    min-width:700px; 
 
    width:100% !important; 
 
}

<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.5/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <!-- Single button --> 
 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-default dropdown-toggle" > 
 
    Action <span class="caret"></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> 
 
    </div>

Answer 1

Вам нужно добавить ширину 100% к классу БТН-группы.
Добавьте это в CSS:

.btn-group { 
    width: 100%; 
} 

Если вы хотите кнопку, чтобы охватить всю ширину тоже, затем добавить ширину 100% кнопки.

.btn-group button { 
    width: 100%; 
} 

jQuery(document).ready(function(){ 
 
    $(".btn-group").hover(
 
     function() { $('.dropdown-menu', this).stop().fadeIn("slow"); 
 
     }, 
 
     function() { $('.dropdown-menu', this).stop().fadeOut("fast"); 
 
    }); 
 
});

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"); 
 
.dropdown-menu { 
 
    min-width:700px; 
 
    width:100% !important; 
 
} 
 
.btn-group { 
 
    width:100%; 
 
}

<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.5/js/bootstrap.min.js"></script> 
 

 
<div class="container"> 
 
    <!-- Single button --> 
 
<div class="btn-group"> 
 
    <button type="button" class="btn btn-default dropdown-toggle" > 
 
    Action <span class="caret"></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> 
 
    </div>