我在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>
谢谢
我不太明白你想做什么。
你可以试试这个吗:
@media screen and (max-width: 767px) {
.select2 {
width: 100% !important;
}
}
可以通过设置data-* attribute:
来解决这个问题<select id="select2" class="form-control" data-width="100%">
...
</select>
这个适合我:
$(window).resize(function() {
$('.select2').css('width', "100%");
});我使用的是select 2版本4，带有bootstrap 3, select 2响应无代码。
请注意，如果你打开一个页面与选择2和调整它的大小选择2的大小不会改变，你可能会认为它没有响应。然而，如果你刷新你的页面在新的大小，你会看到选择2将正确地适应页面。
这是因为select 2在文档完成时呈现其组件并计算大小，并且在调整页面大小时不刷新它们。这是完全可以接受的，因为我们不希望最终用户改变其浏览器大小(这是我们通常在开发测试期间所做的!)
根据我的经验，如果你手动改变select2的宽度，你可能会发现select2下拉框不完全适合选择容器的顶部或按钮。
需要一些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;
}
select2所做的一件事是为它生成的元素设置一个固定的宽度，因此默认情况下它不响应。
使用一点JavaScript，你可以在$(window).resize()事件上设置每个<select>元素的宽度，然后重新初始化select2插件。
注意:为了使元素具有响应性，您不能设置固定宽度(例如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
});
});
是否尝试将col-应用于输入字段?"multiple" id="Search1" style="height:34px"></select>
添加下面的CSS并将其引用到html的最后一个
@media screen {
.select2 {
width: 100% !important;
}
}
正如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", "");
这只是一个示例如果你愿意的话可以让它更简洁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%');
}
}
Javascript:
$("#myid").select2({
width:'100%'
});
默认情况下，.select2-container类的min-width是20em，通过减小它来避免溢出。
根据需要调整
.select2-container {
min-width: 17em;
}