Bootstrap 3.3.5 - 下拉菜單選擇值寬度大文字與小文字

我正在使用Bootstrap 3.3.5下拉菜單。並通過jQuery顯示從下拉列表中選擇的選項。Bootstrap 3.3.5 - 下拉菜單選擇值寬度大文字與小文字

但我在這裏遇到一些問題。我想下拉菜單和按鈕必須始終是相同的寬度。這是很大的文字寬度。

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

如果我上面添加CSS，輸出是...

來源

2015-10-14 Reddy

新增CSS：'.dropdown菜單{ 寬度：200像素重要;！身高：自動; }' –

好了，我爲你做一點點骯髒的工作。我改變了.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

來源

2015-10-14 07:10:24

謝謝** @黑暗騎士** ..它在CodePen中的工作完美..但在我的頁面上雖然:( 我正在檢查問題。謝謝你的時間 – Reddy

@Reddy如果你能提供給我的網址，我可能會嘗試幫助... –

-1

CSS

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

來源

2015-10-14 06:46:45 Alex

Bootstrap 3.3.5 - 下拉菜單選擇值寬度大文字與小文字

回答

相關問題