我有 4 個選擇選項設置為width: 21%;這在桌面上效果很好，因為它們都是水平對齊的，但在移動設備上保持不變，其中 SELECT 的大小減小，保持水平對齊，并且您無法辨認其中的文本。如何使選擇的選項在桌面上水平對齊，在較小的屏幕上垂直對齊（一個在另一個之上）？我可以更改width: 21%;為width: 260px;但有更好的方法嗎？function filter() {  var filter_num_package = document.getElementById("myInput").value.toUpperCase().trim();  var filter_num_nights = document.getElementById("myInput1").value.toUpperCase().trim();  var filter_num_people = document.getElementById("myInput2").value.toUpperCase().trim();  //loop through tr  $(" tbody tr").each(function() {    //get td value 0,1,2    var first_td = $(this).find("td:eq(0)").text().toUpperCase().trim()    var second_td = $(this).find("td:eq(1)").text().toUpperCase().trim()    var third_td = $(this).find("td:eq(2)").text().toUpperCase().trim()    //check if value matches    if (first_td.includes(filter_num_package) &&      second_td.includes(filter_num_nights) &&      third_td.includes(filter_num_people)) {      //display that row      $(this).css("display", "");    } else {      //hide that row      $(this).css("display", "none");    }  })}function filter1() {  //get value of last select  var values = document.getElementById("myInput3").value.toUpperCase().trim();  //check if value is not both or first option  if (values != "BOTH" && values != "") {    //hide all td which are greater then 4    $("tr").find("td:gt(4)").hide()    //loop through second tr > th    $("table tr:eq(1) th ").each(function() {      //check if the text is equal to selct value      if ($(this).text().toUpperCase().trim() === values) {        //show that th        $(this).show();        //get class 21,22..etc        var class_to_hide = $(this).attr('class');        //check th has value 21,22..etc remove colspan        $("tr").find("th:contains(" + class_to_hide + ")").attr("colspan", "")        //check td which has select option        $("tr td[data-column*=" + $(this).text() + "]").show()      } else {        //hide the th        $(this).hide();      }    })  }