Question

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

请参见此处：https://jsfiddle.net/vgoklani/3vtrgkc7/13/

您必须在jsfiddle中调整Result窗口的大小。如果宽度不够长，则隐藏搜索框，并且不会显示。我希望搜索框能够响应，以便根据窗口的宽度调整宽度。

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

由于

Answer 1

我不确定你想要做什么。

你可以试试这个：

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

Answer 2

这对我有用：

＆＃13;

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

＆＃13;

Answer 3

您可以通过设置data- * attribute：

来解决此问题

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

Answer 4

我正在使用select 2版本4，带有bootstrap 3，select 2响应没有代码。

请注意，如果您打开包含选择2的页面并调整其大小，则选择2大小将不会更改，您可能认为它没有响应。如果以新的大小刷新页面，您会看到选择2将正确地适合页面。

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

根据我的经验，如果您手动更改选择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;
}

Answer 5

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

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

Here是一个有效的演示。

Answer 6

是否必须尝试将col-应用于输入字段？像这样"multiple" id="Search1" style="height:34px"></select>

Answer 7

添加以下css并将其引用到最后一个html

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

Answer 8

它只是一个样本，如果你愿意，你可以让它变得更干净，而number是我给select2的类的名字

id = GL.GenTexture();
GL.BindTexture(TextureTarget.Texture3D, id);
GL.TexParameter(TextureTarget.Texture3D, TextureParameterName.TextureMinFilter, (int)TextureMinFilter.Linear);
GL.TexParameter(TextureTarget.Texture3D, TextureParameterName.TextureMagFilter, (int)TextureMagFilter.Linear);
GL.TexImage3D(TextureTarget.Texture3D, 0, PixelInternalFormat.Rgba, width, height, 1, 0, OpenTK.Graphics.OpenGL.PixelFormat.Bgra, PixelType.UnsignedByte, IntPtr.Zero); //allocate memory for the texture but do not upload anything

CudaOpenGLImageInteropResource resultImage = new CudaOpenGLImageInteropResource((uint)id, CUGraphicsRegisterFlags.SurfaceLDST, CudaOpenGLImageInteropResource.OpenGLImageTarget.GL_TEXTURE_3D, CUGraphicsMapResourceFlags.WriteDiscard);
resultImage.Map();
CudaArray3D mappedArray = resultImage.GetMappedArray3D(0, 0);
resultImage.UnMap();

CudaSurface surfaceResult = new CudaSurface(kernelSample, "outputSurface", CUSurfRefSetFlags.None, mappedArray); //nothing needs to be done anymore - this call connects the 3D array from the GL texture to a surface reference in the kernel

Answer 9

Javascript：

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

Answer 10

正如Alireza Fattahi已经说过的那样，具有引导主题的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", "");

Answer 11

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

根据需要进行调整。

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

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

11 个答案: