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

Question

I have built a webpage using Bootstrap. Currently, I have a few <select> elements with size=6 in a col-md-3 on the left and some other stuff in a col-md-9 on the right.

If one shrinks the size of the window, eventually the right column collapses underneath the left column (becoming rows instead of columns).

When this happens, I would like to decrease the <select> size (changing it to size=3 ). I'd like the reverse to happen as well (when the window is re-expanded into columns, the <select> elements return to size=6 ).

I would like to do a similar thing for another element (height instead of size), but I figure that if I can figure out size, I can figure out height.

How do I change an attribute when bootstrap shifts like that?

This is a simplified snippet from the code. I am using 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

Do you need specifically to use the size attribute? Why don't you style your select width based on CSS width and media queries?

You can use the same media queries that bootstrap framework uses and set a width to your select according to the screen size you want:

See this answer: https://stackoverflow.com/a/30542215/8419161

Answer 2

I would recommend using jQuery for this (which you must be using already if you are using Bootstrap). I got this piece of code from here and modified it some to give you a sense of what you can do:

$(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();