如何在 bootstrap 3 导航栏中使 select2 v4 搜索框响应？

Posted 2023-05-07

【中文标题】如何在 bootstrap 3 导航栏中使 select2 v4 搜索框响应？

【英文标题】：How to make select2 v4 search boxes responsive in the bootstrap 3 nav bar?

【发布时间】：2015-08-03 16:45:55

【问题描述】：

我在 bootstrap 3 导航栏中放置了 select2 搜索框。问题是当我调整浏览器大小时，搜索框不会自动调整大小，并且导航栏最终会溢出。目前尚不清楚如何使 select2 框响应。

请看这里：https://jsfiddle.net/vgoklani/3vtrgkc7/13/

您必须在 jsfiddle 中调整结果窗口的大小。如果宽度不够长，搜索框将被隐藏，并且不会显示。我希望搜索框能够响应，以便它们的宽度根据窗口的宽度调整大小。

    <nav class="navbar navbar-dark navbar-fixed-top">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
                    <i class="fa fa-chevron-down fa-2x" style="font-size: 16px;color:#fff"></i>
                </button>
                <a class="navbar-brand">NAME</a>
            </div>

            <div class="collapse navbar-collapse" id="navbar">
                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search1" multiple="multiple" id="Search1" style="width:400px;height:34px"></select>
                    </div>
                </form>

                <form class="navbar-form navbar-left" role="search">
                    <div class="form-group">
                        <select multiple class="Search2" multiple="multiple" id="Search2" style="width:400px;height:34px"></select>
                    </div>
                </form>

            </div>
        </div>
    </nav>

谢谢

【问题讨论】：

从您的帖子中不清楚您的实际问题是什么。您提供的代码具有硬编码大小（因此不响应）。你最后提到了一些关于父容器的事情？

我重写了帖子，如果还不清楚，请告诉我。

你能在jsfiddle.net上创建一个样本吗？

完成，请看修改后的问题

我也不确定......这是我能得到的最接近的 jsfiddle.net/3vtrgkc7/17 但它并不完美

【参考方案1】：

我不确定你想做什么。

你可以试试这个：

@media screen and (max-width: 767px) 
    .select2 
        width: 100% !important;
    

【讨论】：

max-width: 100% !important 可能更合适。

【参考方案2】：

你可以通过设置 data-* 属性来解决这个问题：

<select id="select2" class="form-control" data->
    ...
</select>

【讨论】：

这是一个记录的属性吗？我试过了，效果很好。想知道为什么这不是更多的投票。

这是完美的解决方案！

【参考方案3】：

这对我有用：

$(window).resize(function() 
    $('.select2').css('width', "100%");
);

【参考方案4】：

我使用的是选择 2 版本 4，带有引导程序 3，选择 2 是响应式的，没有代码。

请注意，如果您使用 select 2 打开页面并调整其大小，则 select 2 的大小不会改变，您可能会认为它没有响应。但是，如果您以新的大小刷新页面，您会看到 select 2 将正确地适合页面。

这是因为 select 2 会在文档完成时渲染其组件并计算大小，并且在调整页面大小时不会刷新它们。这是完全可以接受的，因为我们不希望最终用户更改其浏览器大小（这是我们在开发过程中通常会做的测试！）

根据我的经验，如果您手动更改 select 2 的宽度，您可能会发现 select2 下拉菜单不完全适合选择容器的顶部或按钮。

---

唯一需要一些 CSS 的情况是当您的网站被手机浏览时，用户可以通过旋转手机来旋转屏幕。

下面的 css 可能会有所帮助，因为它会通过考虑引导列来调整选择 2 的大小：

/*Make select2 responsive*/
[class*="col-"] .select2-container 
    width:100%!important;

[class*="col-"] .select2-container .select2-search input[type="text"] 
    padding:2px 4%!important;
    width:90%!important;
    margin:5px 2%;

[class*="col-"] .select2-container .select2-drop 
    width: 100%!important;

【参考方案5】：

select2 所做的一件事是为其生成的元素设置固定宽度，因此默认情况下它是不响应的。

使用一点 javascript，您可以在 $(window).resize() 事件上设置每个 <select> 元素的宽度，然后重新初始化 select2 插件。

注意：为了让元素具有响应性，您不能设置固定宽度（例如 400 像素），而是设置可变宽度。在我的示例中，我假设每个选择的宽度都等于正文宽度的三分之一。

// Assume that each select will have as width the 1/3 of the body width
// Get body width and divide it with 3 and apply it to each select
var width = $('body').width() / 3;
$('#Search1, #Search2').width(width);

$("#Search1, #Search2").select2(
    data: data
);

// Put same code to the window.resize handler to run again when the window is resized
$(window).resize(function() 
    var width = $('body').width() / 3;
    $('#Search1, #Search2').width(width);

    $("#Search1, #Search2").select2(
        data: data
    );
);

Here 是一个工作演示。

【讨论】：

文档页面声明 select2 确实是响应式的：“Select2 的宽度可以设置为其父级的百分比以支持响应式设计。”我发布了这个问题，因为我不知道如何实现这个特定的功能

我猜他们的意思是它可以适应各种宽度，不一定是当用户调整窗口大小时，这是你问的，对吧？

【参考方案6】：

必须尝试将col- 应用于输入字段？像这样"multiple" id="Search1" style="height:34px"></select>

【讨论】：

"col-" ?我不听你说的

您使用的是 Bootstrap，对吗？然后尝试使用引导输入类或网格类，例如：<select multiple id="Search1" class="col-md-4 col-sm-4 col-lg-4 hidden-xs" multiple="multiple" id="Search1" style=";height:34px"></select>。 hidden -xs 会将其隐藏在超小的显示屏上。试试吧。您也可以使用引导程序中的输入类。检查这个http://getbootstrap.com/css/#forms和http://getbootstrap.com/components/#input-groups

【参考方案7】：

在 css 下方添加并将其引用到您的最后一个 html

 @media screen 
    .select2 
        width: 100% !important;
    

【参考方案8】：

正如 Alireza Fattahi 已经说过的，带有引导主题的 select2 v4 已经在某种程度上具有响应性。要处理浏览器调整大小问题，您可以在调整大小事件上重新初始化 select2。

    $(window).resize(function () 
        $("select").select2();
    );

在进一步检查之后，我得出的结论是您不想重新初始化 select2 控件。这是矫枉过正，如果您不小心以与创建它的方式完全相同的方式重新初始化它，它将无法按预期工作。

我发现，因为我将控件放置在响应式容器中，所以我需要做的就是在控件初始化后摆脱 select2 容器中的内联宽度。据我测试，也不需要处理窗口调整大小事件。

    //Initialize select2
    $("select").select2(
       //your options
    );

    //Remove inline width after initialization
    $(".select2.select2-container").css("width", "");

【参考方案9】：

它只是一个示例，如果你愿意，你可以让它更简洁，数字是我给 select2 的类的名称

$screenWidth=$(this).width();

function checkWindowWidth() 
 if($screenWidth<767)
 

 if(991>$screenWidth && $screenWidth>768)
    $('.number',.number+span).css('width','100%');
 

 if($screenWidth<1199 && $screenWidth>992)
    $('.number,.number+span').css('width','45%');
 

 if($screenWidth>1199)
    $('.number,.number+span').css('width','33%');   
 

【参考方案10】：

Javascript：

$("#myid").select2(
   width:'100%'
);

【参考方案11】：

.select2-container 类的min-width 默认为20em，通过减小它使其不会溢出。

根据需要进行调整。

.select2-container 
  min-width: 17em;