如何在 bootstrap selectpicker 中为选项（下拉）设置固定宽度

Question

这是代码

  <select class="selectpicker form-control" data-live-search="true" id="subject_teacher_drop_down">
       <option>English</option>
       <option>Methodology of social science with special reference to economics</option>
  </select>

我想将下拉菜单的宽度设为例如 100 px。现在宽度等于最大选项的大小。

Answer 1

您可以添加

select,option
{
   width : 150px(just give the width PX which it for screen size);
}

Answer 2

Guyz，我想到了一个简单的答案。我们可以在 select 选项中使用 'datacontent' 属性来显示 select 选项的值，从而改变它的宽度 :) 代码是：

 <select class="selectpicker form-control" data-live-search="true" id="subject_teacher_drop_down">
   <option data-content="English">English</option>
   <option data-content="Methodology of social...">Methodology of social science with special reference to economics</option>
</select>

如果您要动态传递值，请这样做：

  <select class="selectpicker form-control" data-live-search="true">
          <?php foreach ($subjectList as $subjects) : ?>
             <option data-content=" <?php $a =$subjects->getName();$b = substr($a, 0, 35);$y = $b . "...";if($a > $b)echo $y; else echo $a;?>" id="<?php echo $subjects->getId(); ?>" name="<?php echo $subjects->getName(); ?>" value="<?php echo $subjects->getName(); ?>">
                <?php echo $subjects->getName(); ?>
            </option>
       <?php endforeach; ?>
  </select>

Answer 3

在标记中使用 css 样式 and/or 类似乎无法做到这一点，但如果您愿意 javascript -- 在下面的示例，jQuery -- 然后您可以挂钩选择器的 show.bs.select 事件并按如下方式修改小部件：

$('.selectpicker').on('show.bs.select', function () {
var $dropdownMenu = $(this).nextAll('div.dropdown-menu').first();
if ($dropdownMenu.length > 0) {
    $dropdownMenu.css('min-width', '').css('max-width', '100%');
    var $inner = $dropdownMenu.find('div.inner');
    if ($inner.length > 0) {
        $inner.css('overflow-x', 'hidden');
    }
}

});

我在这里访问 div 它使用的下拉菜单并删除它为 min-width 分配的任何内容，然后将 max-width 设置为 100% 然后删除如果选项太宽可能会显示的水平滚动条我正在将下拉列表的 'inner' div overflow-x 设置为 hidden.

结果是一个下拉菜单，它被限制为按钮的宽度，显示它的任何选项都有太宽的文本被截断。

在这方面的工作比我想做的多，但默认行为使下拉菜单无法在 small-screen 显示器上使用...

如何在 bootstrap selectpicker 中为选项（下拉）设置固定宽度

How can I set fixed width for options(dropdown) in bootstrap selectpicker

javascript

html

drop-down-menu

bootstrap-4

bootstrap-selectpicker