Bootstrap SelectPicker 扩展过去的面板标题

Question

我目前正在使用 Bootstrap 的 SelectPicker，并试图将其显示在面板标题内，右对齐，紧挨着几个 Bootstrap 按钮。我的问题是 Bootstrap 下拉菜单太宽了。它延伸到面板标题结束的地方。我试图改变下拉菜单的宽度，并使用其他选项，如 float: right 和 drop-down-menu right 而不是 pull-right，但没有雪茄。我试图更改选择器的 CSS 并尝试使用 Jquery 更改它的位置，但它保持相同的宽度并且不会改变。下面是我的代码示例：

@if (Model.Customers != null && Model.Customers.Any())
        {
            <select name="custDropdown" id="custDropdown" class="selectpicker pull-right" title="Select a Customer...">
                @foreach (var customer in Model.Customers)
                {
                    <option value="@customer.UserName">@customer.FirstName @customer.LastName</option>
                }
            </select>
        }
        else
        {
            <select class="selectpicker pull-right" title="No Users for this Customer" disabled></select>
        }

<div class="panel panel-default">
    <div class="panel-heading">
        Claim Activity
    </div>
</div>

我没有在此代码示例中包括我的其他按钮，但它们都有 class pull-right 与之相关联。我已经对此进行了大量研究，但我还没有找到任何有用的文章或主题，有人试图用 select 语句来做到这一点，只有下拉按钮。我知道在尝试将 pull-right 应用于它们时，与按钮相比，下拉菜单的行为很奇怪，但我不明白为什么它会延伸到面板标题之外。我知道这与名称在下拉列表中的长度无关。现在显示的名称比较短，无论长短宽度都不会改变。如果有人有任何建议或知道我能做些什么来解决这个问题，那就太好了。这是一张图片，供我在下面谈论的内容参考：

Answer 1

我最终解决了这个问题。事实证明，问题出在 SelectPicker 的 CSS 上。之前尝试修改 CSS 时，我只是找错了地方。宽度设置为 100%，我不得不将其缩短到 82.5%。

.bootstrap-select > .dropdown-toggle {
  width: 82.5%;
  padding-right: 25px;
  z-index: 1;
}

Bootstrap SelectPicker 扩展过去的面板标题

Bootstrap SelectPicker Extends Past Panel Heading

c#

jquery

asp.net-core

bootstrap-4

bootstrap-selectpicker