如何在引导选择选择器中为选项（下拉菜单）设置固定宽度

Posted 2023-03-05

【中文标题】如何在引导选择选择器中为选项（下拉菜单）设置固定宽度

【英文标题】：How can I set fixed width for options(dropdown) in bootstrap selectpicker

【发布时间】：2018-11-28 07:29:35

【问题描述】：

这是代码

  <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 。现在宽度等于最大选项的大小。

【问题讨论】：

您必须查看呈现的标记（例如通过开发人员工具），然后在元素上应用您的样式（width:100px;）

嗨，欢迎来到 Stack Overflow，看来您的问题是重复的。看看here。 @ThumChoonTat 将宽度应用于 <option> 将不起作用。

Set Width at Option of Select Box的可能重复

@Ivan OP 正在使用第三方库渲染选择字段，输出不会是select 和option，所以我认为这是可能的

没有简单的答案？ :(

【参考方案1】：

你可以添加

select,option

   width : 150px(just give the width PX which it for screen size);

【参考方案2】：

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

 <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>

【参考方案3】：

似乎没有办法在标记中使用 css 样式和/或类来做到这一点，但如果你对 javascript 开放——在下面的示例中，jQuery——那么你可以挂钩 selectpicker 的 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%，然后删除如果选项是可能显示的水平滚动条太宽了，我将下拉菜单的“内部”div overflow-x 设置为 hidden。

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

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

【讨论】：

或...我在发布此消息后几乎立即发现，只需将以下内容添加到您的 site.css 文件中：.bootstrap-select .dropdown-menu max-width: 100% !important;