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

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

请看这里：

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

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

名称

---

谢谢

您必须尝试将

列-

应用于输入字段吗？像这样，我不确定你想做什么

你能试试这个吗

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

---

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

使用一点JavaScript，您可以在

$（窗口）上设置每个
元素的宽度。resize（）

事件，然后重新初始化选择2插件

注意：为了使元件具有响应性，您不能设置固定宽度（例如400px），而是设置流体宽度。在我的示例中，我假设每个选择的宽度等于主体宽度的三分之一

// 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
    });
});

---

是一个正在运行的演示。

我使用的是select 2版本4，带有引导程序3，select 2响应速度快，没有代码

请注意，如果您使用select 2打开页面并调整其大小，则select 2的大小不会改变，您可能会认为它没有响应。然而，如果您以新的大小刷新页面，您会发现select 2将正确地放入页面中

这是因为select 2在文档完成时呈现其组件并计算大小，而在调整页面大小时不刷新它们。这是可以接受的，因为我们不希望最终用户更改其浏览器大小（这是我们在测试开发期间通常做的事情！）

根据我的经验，如果您手动更改select 2宽度，您可能会发现select2下拉列表不完全适合select container的顶部或按钮

---

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

在这种情况下，css可能会有所帮助，因为它将通过考虑引导列来调整select 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;
}

---

这只是一个示例，如果您愿意，您可以使它更干净，number是我给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%');   
 }
}

$screenWidth=$（this）.width（）；
函数checkWindowWidth（）{
如果（$screenWidth$screenWidth&&$screenWidth>768）{
$（'.number'，.number+span）.css（'width'，'100%）；
}
如果（$992）{
$（'.number，.number+span'）.css（'width'，'45%）；
}
如果（$screenWidth>1199）{
$（'.number，.number+span'）.css（'width'，'33%）；
}
}

在下面添加css，并将其引用到最后一个html

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

Javascript:

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

这对我很有用：

$（窗口）。调整大小（函数（）{
$（'.select2'）.css（'width'，'100%”）；
});正如Alireza Fattahi所说，带有引导主题的Select2V4已经有了某种响应。要处理浏览器调整大小问题，可以在调整大小事件中重新初始化select2

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

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

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

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

我发现，由于我将控件放置在一个响应容器中，所以我所需要做的就是在控件初始化后去掉select2容器中的内联宽度。据我测试，也没有必要处理窗口大小调整事件

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

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

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

您可以通过设置data-*属性来解决此问题：

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


...
默认情况下，
的
最小宽度
。select2 container
类的
最小宽度为
20em
，方法是将其减小，使其不会溢出

根据需要进行调整

。选择2容器{
最小宽度：17em；
}
从您的帖子中不清楚您的实际问题是什么。您提供的代码具有硬编码大小（因此不响应）。最后你提到了关于父容器的内容？我重写了这篇文章，如果还不清楚，请告诉我。你能在上面创建一个样本吗？完成了，请查看修改后的问题我也不确定。。。这是我能得到的最接近的，但它不是完美的“col-”？我不明白你说的你在用Bootstrap，对吧？然后尝试使用引导输入类或网格类，例如：
hidden-xs
将在超大屏幕上隐藏它。试试看。还可以使用引导中的输入类。检查此
http://getbootstrap.com/css/#forms
和
http://getbootstrap.com/components/#input-groups
文档页面声明select2确实具有响应性：“select2的宽度可以设置为其父级的百分比，以支持响应性设计。”我发布这个问题是因为我不知道如何实现这个特定的功能我想他们的意思是它可以适应不同的宽度，而不一定是当用户调整窗口大小时，这就是你所问的，对吧？
max width:100%！重要信息
可能更合适。这是有文档记录的属性吗？我试过了，效果很好。想知道为什么这不是更多。这是一个完美的解决方案！