如何使Bootstrap 3导航栏中的Select2 v4搜索框具有响应式布局？

Question

我将select2搜索框放置在bootstrap 3导航栏中。问题是当我调整浏览器大小时，搜索框不会自动调整大小，导航栏最终会溢出。我不清楚如何使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>

谢谢

- vgoklani

---

我重写了这篇文章，请告诉我它是否还不清楚。 - vgoklani

请问您能否在 http://jsfiddle.net 上创建一个示例？ - Dhiraj

您想在任何时候隐藏Select2框吗？即在任何窗口大小/宽度下？还是您想始终显示它们，而不考虑窗口大小/宽度（但调整大小）？ - blurfus

我们将它们隐藏在引导程序XS模式中，但是我想在S、M和L中显示它们。我更大的问题是我不知道如何使它们响应。 - vgoklani

我也不太确定...这是我最接近的 https://jsfiddle.net/3vtrgkc7/17/ 但还不完美。 - blurfus

Answer 1

我不确定我理解你想做什么。

你可以试试这个：

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

- Seb33300

---

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

Answer 2

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

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

- lexxl

---

这是一个有文档记录的属性吗？我尝试了一下，它完美地工作了。不知道为什么没有更多的赞。 - Theunis

这是完美的解决方案！ - lewis4u

Answer 3

这对我有用：

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

- Filipe Daniel

Answer 4

我正在使用select 2版本4和bootstrap 3，select 2是自适应的，无需编码。

请注意，如果您打开一个带有select 2的页面并调整大小，select 2的大小不会改变，您可能会认为它不是自适应的。但是，如果您在新的大小下刷新页面，则会发现select 2将正确地适合页面。

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

根据我的经验，如果您手动更改select 2的宽度，您可能会发现select2下拉框不能恰好适配选择容器的顶部或底部的情况。

---

唯一需要一些CSS的情况是当用户在移动设备上浏览您的网站并旋转屏幕时。

在下面的CSS中，以下内容可能有所帮助，因为它将根据Bootstrap列调整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;
}

- Alireza Fattahi

Answer 5

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

使用一些 JavaScript 代码可以在 $(window).resize() 事件中设置每个 <select> 元素的宽度，然后重新初始化 select2 插件。 注意：为了使元素具有响应性，不能设置固定宽度（例如400px），而应该设置流体宽度。在本例中，我假设每个选择器的宽度都等于 body 宽度的三分之一。

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

这里有一个可工作的演示。

- Tasos K.

---

文档页面指出，Select2确实是响应式的：“Select2的宽度可以设置为其父元素的百分比，以支持响应式设计。” 我发布了这个问题，因为我无法弄清楚如何实现这个特定的功能。 - vgoklani

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

Answer 6

您是否尝试过将col-应用于输入框？就像这样"multiple" id="Search1" style="height:34px"></select>

- Akhil Namboothiri

---

"col-"？我不明白你在说什么。 - vgoklani

你正在使用Bootstrap，对吧？那么尝试使用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 将其从超小型显示中隐藏。试试看。此外，您还可以使用Bootstrap的输入类。请查看以下链接：http://getbootstrap.com/css/#forms 和 http://getbootstrap.com/components/#input-groups。 - Akhil Namboothiri

Answer 7

在你的HTML文件末尾添加以下CSS并引用它。

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

- Tejas Bhatt

Answer 8

正如Alireza Fattahi所述，使用bootstrap主题的select2 v4已经是响应式的。为了处理浏览器调整大小的问题，您可以在resize事件上重新初始化select2。

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

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

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

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

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

- rjax

Answer 9

.select2-container类的min-width默认为20em，通过减小它的大小以避免溢出。

根据需要进行调整。

.select2-container {
  min-width: 17em;
}

- busla

Answer 10

Javascript：

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

- Aruna Warnasooriya