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

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 2

您可以添加

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

Answer 3

似乎没有办法在标记中使用css样式和/或类来执行此操作，但是如果您对javascript开放（在下面的示例中为jQuery），则可以钩住selectpicker的{{1} }事件，并如下修改窗口小部件：

show.bs.select

}）;

在这里，我访问它使用的下拉菜单的div，并删除为$('.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'); } }分配的内容，然后将min-width设置为100％，然后删除水平滚动条。显示选项是否太宽，我将下拉菜单的“内部” div max-width设置为overflow-x。

结果是一个下拉菜单，该菜单受限于按钮的宽度，该按钮以任何带有太宽的文本被截断的选项来显示该按钮。

比我想做的事情更多的工作，但是默认行为使下拉菜单在小屏幕显示器上无法使用...

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

3 个答案: