twitter-bootstrap 如何在 bootstrap 3 导航栏中使 select2 v4 搜索框响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30383519/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make select2 v4 search boxes responsive in the bootstrap 3 nav bar?
提问by vgoklani
I've placed select2 search boxes inside a bootstrap 3 navbar. The issue is when I resize the browser, the search boxes don't auto-resize, and the navbar ends up overflowing. It's not clear to be how to make the select2 boxes responsive.
我在 bootstrap 3 导航栏中放置了 select2 搜索框。问题是当我调整浏览器大小时，搜索框不会自动调整大小，导航栏最终会溢出。目前尚不清楚如何使 select2 框响应。
Please see here: https://jsfiddle.net/vgoklani/3vtrgkc7/13/
请看这里：https: //jsfiddle.net/vgoklani/3vtrgkc7/13/
You will have to resize the Result window in jsfiddle. The search boxes are hidden if the width isn't sufficiently long, and will not show up. What I would like is for the search boxes to be responsive, such that their width resizes based on the width of the window.
您必须在 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>
Thanks
谢谢
回答by Seb33300
I am not sure to understand what you want to do.
我不确定你想做什么。
Can you try this:
你能试试这个吗：
@media screen and (max-width: 767px) {
.select2 {
width: 100% !important;
}
}
回答by lexxl
You can solve this by setting data-* attribute:
您可以通过设置 data-* 属性来解决此问题：
<select id="select2" class="form-control" data-width="100%">
...
</select>
回答by Filipe Daniel
This works for me:
这对我有用：
$(window).resize(function() {
$('.select2').css('width', "100%");
});回答by Alireza Fattahi
I am using select 2 version 4, with bootstrap 3, the select 2 is responsive with no code.
我正在使用 select 2 version 4，使用 bootstrap 3，select 2 响应，没有代码。
Please beware that if you open a page with select 2 and resize it the select 2 size will not change and you may think that it is not responsive. How ever if you refresh your page in new size, you see that select 2 will fit correctly in the page.
请注意，如果您使用 select 2 打开页面并调整其大小，则 select 2 的大小不会改变，您可能会认为它没有响应。但是，如果您以新尺寸刷新页面，您会看到选择 2 将正确地适合页面。
This is because select 2 renders its components and calculate sizes when document is finished and do not refresh them when you resize the page. This is quite acceptable as we do not expect the end user change its browser size (this is what we usually do during development for test! )
这是因为 select 2 在文档完成时呈现其组件并计算大小，并且在调整页面大小时不刷新它们。这是完全可以接受的，因为我们不希望最终用户改变其浏览器大小（这是我们在测试开发过程中通常做的事情！）
As my experience if you change the select 2 width manually , you may find situations that the select2 drop down will not fit exactly at the top or button of select container.
根据我的经验，如果您手动更改 select 2 的宽度，您可能会发现 select2 下拉列表不完全适合选择容器的顶部或按钮的情况。
The only case which some css is needed is when your site is browsed by a mobile and user can rotate the screen by rotating his mobile.
唯一需要一些 css 的情况是当您的网站被手机浏览时，用户可以通过旋转他的手机来旋转屏幕。
In this below css may help, as it will resize the select 2 by considering bootstrap columns:
在下面的 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;
}
回答by Tasos K.
One thing that select2does is to set a fixed width to the elements it generates so by default it is not responsive.
select2所做的一件事是为其生成的元素设置固定宽度，因此默认情况下它没有响应。
Using a bit of JavaScript you can set the width of each <select>element on the $(window).resize()event and then reinitialize the select2plugin.
使用一些 JavaScript，您可以设置事件<select>上每个元素的宽度，$(window).resize()然后重新初始化select2插件。
Note: In order for the elements to be responsive you cannot set a fixed width (e.g. 400px) but set a fluid width instead. In my example I assume that each select will have as width equal to one third of the body width.
注意：为了使元素具有响应性，您不能设置固定宽度（例如 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
});
});
Hereis a working demo.
这是一个工作演示。
回答by Akhil Namboothiri
Have to tried to apply col-to input field? like this "multiple" id="Search1" style="height:34px"></select>
必须尝试应用于col-输入字段？像这样"multiple" id="Search1" style="height:34px"></select>
回答by Tejas Bhatt
add below css and reference it to the last of your html
添加下面的 css 并将其引用到您的最后一个 html
@media screen {
.select2 {
width: 100% !important;
}
}
回答by Aruna Warnasooriya
Javascript :
Javascript :
$("#myid").select2({
width:'100%'
});
回答by Alisanie
Its just a sample and you can make it cleaner if you like and number is the name of class that I gave to select2
它只是一个样本，如果你愿意，你可以让它更干净，数字是我给 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%');
}
}
回答by rjax
As already stated by Alireza Fattahi, select2 v4 with the bootstrap theme is already responsive, sort of. To handle the browser resize issue you can reinitialize select2 on the resize event.
正如 Alireza Fattahi 已经说过的那样，带有引导程序主题的 select2 v4 已经是响应式的了。要处理浏览器调整大小问题，您可以在调整大小事件上重新初始化 select2。
$(window).resize(function () {
$("select").select2();
});
After checking this further I've come to the conclusion that you don't want to reinitialize the select2 controls. It's overkill and if you're not careful to reinitialize it in exactly the same way as it was created it will not work as expected.
在进一步检查之后，我得出的结论是您不想重新初始化 select2 控件。这是矫枉过正，如果您不小心以与创建时完全相同的方式重新初始化它，它将无法按预期工作。
What I found was since I am placing the controls in a responsive container all I needed to do was to get rid of the inline width in the select2 container after the control had been initialized. As far as I've tested it there is also no need to handle the window resize event.
我发现是因为我将控件放在响应容器中，所以我需要做的就是在控件初始化后摆脱 select2 容器中的内联宽度。据我测试，也不需要处理窗口调整大小事件。
//Initialize select2
$("select").select2({
//your options
});
//Remove inline width after initialization
$(".select2.select2-container").css("width", "");
