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

【问题标题】：Bootstrap SelectPicker Extends Past Panel HeadingBootstrap SelectPicker 扩展了过去的面板标题
【发布时间】：2018-09-24 06:11:30
【问题描述】：

我目前正在使用 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 应用于它们时，与按钮相比，下拉菜单的行为很奇怪，但对我来说为什么它会延伸到面板标题之外没有意义。我知道这与名称在下拉列表中的长度无关。现在显示的名字比较短，无论长短宽度都不会改变。如果有人有任何建议或知道我能做些什么来解决这个问题，那就太好了。这是我在下面谈论的内容的参考图片：

【问题讨论】：

标签： c# jquery asp.net-core bootstrap-4 bootstrap-selectpicker

【解决方案1】：

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

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

【讨论】：