重新排列移动屏幕上的多个选择选项

Question

我有 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();      }    })  } 

Answer 1

你已经快到了，因为你的 jsfiddle 示例中已经有了一个 @media 查询。您可以覆盖输入的宽度，以使它们在较小的屏幕上为全宽。

尝试将类似的内容添加到 @media 查询的底部：

@media only screen and (max-width: 760px), 

(min-device-width: 768px) and (max-device-width: 1024px) {

   

    /* add the following below the other styles in the media query: */

    #myInput,

    #myInput1,

    #myInput2,

    #myInput3 {

        width: 100%; /* make the input full width */

        margin-bottom: 5px; /* optional: add some spacing between the vertical inputs */

    }

}