19

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

谢谢

4

11 回答 11

33

我不确定你想做什么。

你可以试试这个：

@media screen and (max-width: 767px) {
    .select2 {
        width: 100% !important;
    }
}
于 2015-06-03T12:34:05.250 回答
14

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

<select id="select2" class="form-control" data-width="100%">
    ...
</select>
于 2017-02-08T09:04:21.120 回答
11

这对我有用：

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

于 2016-11-14T18:05:36.867 回答
6

我正在使用选择 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;
}
于 2015-12-23T06:41:51.027 回答
2

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

使用一点 JavaScript，您可以设置事件中每个<select>元素的宽度，$(window).resize()然后重新初始化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
    });
});

这是一个工作演示。

于 2015-06-04T10:25:34.253 回答
1

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

于 2015-06-01T07:53:16.937 回答
1

正如 Alireza Fattahi 已经说过的，带有 bootstrap 主题的 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", "");
于 2017-01-02T15:09:29.197 回答
1

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

 @media screen {
    .select2 {
        width: 100% !important;
    }
}
于 2016-05-04T14:49:48.253 回答
0

默认情况下min-width，通过减少它，它不会溢出。.select2-container20em

根据需要进行调整。

.select2-container {
  min-width: 17em;
}
于 2020-01-11T15:34:18.517 回答
0

它只是一个示例，如果你愿意，你可以让它更干净，数字是我给 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%');   
 }
}
于 2016-03-27T13:07:47.813 回答
0

Javascript：

$("#myid").select2({
   width:'100%'
});
于 2016-07-01T08:09:10.377 回答