Bootstrap 3.3.5 - 下拉选择值宽度为大文本与小文本

Question

我正在使用Bootstrap 3.3.5下拉菜单。并通过jQuery从下拉列表中显示所选选项。

但我在这里遇到一些问题。我想要下拉菜单，按钮必须始终是相同的宽度。那是大文字宽度。

  

Online Demo

HTML

<!-- Dropdown -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="selection">Lorem Ipsum dolar sit amet</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Lorem Ipsum dolar sit amet</a></li>
    <li><a href="#">Option 2</a></li>
    <li><a href="#">Option 3</a></li>
  </ul>
</div>
<!-- /Dropdown -->

的jQuery

$(".dropdown-menu li a").click(function(){
  var selText = $(this).text();
  $(this).parents('.btn-group').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
});

请查看以下图片......

.dropdown-menu{min-width:auto;width:100%;}

如果我添加Above CSS，则输出为......

Answer 1

好的，所以我为你做了一些讨厌的工作。我将.dropdown-menu更改为

.dropdown-menu{min-width:auto;width:auto;}

然后我写了一个脚本

$(document).ready(function() {
   var tWidth = $('.dropdown-menu').outerWidth();
   var uWidth = $('.btn.btn-default.dropdown-toggle').outerWidth();

  if (tWidth>=uWidth){

   $('.btn.btn-default.dropdown-toggle').css("width", tWidth); 

  }

  else {

     $('.dropdown-menu').css("width", uWidth); 
  }
});

这样做，它检查drop down toggle和.dropdown-menu的宽度，并将更大的宽度分配给较小的div。所以两个div都有相同的宽度。

以下是CodePen

Answer 2

CSS

.dropdown-menu {
    min-width: auto;
   // width: 100%;
    width: auto;
}