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

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 */    }}