Question

我有一个像这样的引导按钮和下拉列表：

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    CHOOSE OPTION
    <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Option 1</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
    </ul>
</div>

我确保所选选项出现在按钮文本中，如下所示：

$('.dropdown-menu a').on('click', function(){
    $(this).parent().parent().prev().html($(this).html() + '<span class="caret"></span>');
 })

但是当我选择一个选项时，按钮的宽度会发生变化。在做出选择后，如何保持按钮的宽度相同？

Answer 1

你可以在你的css中放一个类，它在bootstrap css之后加载，它将按钮宽度设置为固定宽度，例如：

.toggleClass .btn {
width: 300px;
min-width: 300px;
max-width: 300px;
}

但你真的应该问自己这是不是你想要做的。因为您必须将宽度设置为足够宽以用于下拉列表中的最长选项，并且对于较短的选项而言可能不是美学上令人满意的。此外，如果您设置按钮的宽度，那么它将不会响应较小的屏幕和设备，除非您在css中创建媒体查询以处理较小的屏幕，这将很难管理。你会为自己创造更多的工作，但如果由于某种原因它是必要的，就像客户要求的那样，那么上面就是一种方法。

Answer 2

@bdubay是最接近的。有用的是：

.dropdown-toggle {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
}

在bootstrap下拉列表中选择后保留按钮宽度

2 个答案: