Question

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

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

发生这种情况时，我想减少<select>尺寸（将其更改为size=3）。我也希望反过来发生（当窗口重新扩展为列时，<select>元素返回size=6）。

我想为另一个元素（高度而不是大小）做类似的事情，但我想如果我能计算出尺寸，我可以计算出高度。

当bootstrap像那样移动时，如何更改属性？

这是代码中的简化代码段。我正在使用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>

Answer 1

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

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

请参阅此答案：https://stackoverflow.com/a/30542215/8419161

Answer 2

我建议使用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网格更改布局时，如何更改select元素的大小？

2 个答案: