当 Bootstrap 网格更改布局时，如何更改选择元素的大小？答案

【问题标题】：How do I change the size of a select element when Bootstrap grid changes layout?当 Bootstrap 网格更改布局时，如何更改选择元素的大小？
【发布时间】：2017-08-24 03:54:34
【问题描述】：

我已经使用 Bootstrap 构建了一个网页。目前，我有一些<select> 元素，左边的col-md-3 中有size=6，右边的col-md-9 中有一些其他的东西。

如果缩小窗口大小，最终右列会折叠在左列下方（变成行而不是列）。

发生这种情况时，我想减小<select> 的大小（将其更改为size=3）。我也希望发生相反的情况（当窗口重新展开为列时，<select> 元素返回到size=6）。

我想对另一个元素（高度而不是大小）做类似的事情，但我想如果我能算出大小，我就能算出高度。

当引导程序发生这种变化时如何更改属性？

这是从代码中简化的 sn-p。我正在使用 Bootstrap 3。

<div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div id="flight-selection-div" class="panel-group">
                        <div class="panel panel-primary flight-panel">
                            <div class="panel-heading flight-panel">
                                <h4 class="panel-title">Flights</h4>
                            </div>
                            <div class="panel-body">
                                <select size=6 class="form-control" id="flight-select" name="flight">
                                    <option value=null disabled>Select a flight here</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="panel-group">
                        <div class="panel panel-primary map-panel">
                            <div class="panel-heading map-panel">
                                <h4 class="panel-title">Map</h4>
                            </div>
                            <div class="panel-body">
                                <div id="map"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-9">
                    <img src="fisher2.png" class="img-responsive" id="img-ele" alt="Your data will appear here">
                </div>
            </div>
        </div>

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

我建议为此使用 jQuery（如果您正在使用 Bootstrap，您必须已经在使用它）。我从here 获得了这段代码，并对其进行了一些修改，让您了解自己可以做什么：

$(window).resize(function() {
    if (window.innerWidth < 480) {

        $('#flight-select').replaceWith('<select size=3 class="form-control" id="flight-select" name="flight">');

     } else{

       $('#flight-select').replaceWith('<select size=6 class="form-control" id="flight-select" name="flight">');    

     }
        }).resize();

【讨论】：

啊哈！谢谢你。我一直不确定 Bootstrap 将其列转换为行的断点是什么。我假设我也可以使用$('#flight-select').prop('size','3')?
是的。根据 .prop() 上的 jQuery 文档，这似乎也可以正常工作。

【解决方案2】：

您是否需要专门使用 size 属性？为什么不根据 CSS 宽度和媒体查询设置选择宽度的样式？

您可以使用引导框架使用的相同媒体查询，并根据您想要的屏幕尺寸为您选择设置宽度：

看到这个答案：https://stackoverflow.com/a/30542215/8419161

【讨论】：

size 属性决定了高度，而不是宽度。我对使用size 并不执着，但这是我知道在<select> 下拉列表中同时显示多个选项的唯一方法。如果有办法对height 做同样的事情，那将是一个可以接受的解决方案！谢谢你的回答。