Bootstrap SelectPicker扩展了过去的面板标题

Question

我目前正在使用Bootstrap的SelectPicker，并尝试将其显示在面板标题内，右侧对齐，旁边有几个Bootstrap按钮。我的问题是Bootstrap下拉列表太宽。它延伸到面板标题结束的位置。我尝试将宽度更改为下拉菜单，并使用其他选项，例如float: right和drop-down-menu right代替pull-right，但没有雪茄。我试图改变selectpicker的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>

我还没有在此代码示例中包含我的其他按钮，但它们都有与之关联的类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;
}