html - 响应式无序列表

Question

我正在使用下面的代码来显示功能列表:

<?php

    $values = get_field('features'); 
    if($values)
    {
        echo '<ul class="fa-ul product-features">';

        foreach($values as $value)
        {
            echo '<li><i class="fa-li fa  fa-check"></i>' . $value["feature_list"] . '</li>';
        }
        echo '</ul>';
    }

    ?>

我有一堆不同的列表，其中包含不同数量的功能项。有些有 7 里点，其他有超过 10 点。基本上我使用下面的 CSS 来引入第 6 个元素符号时它开始一个新列。

.product-features  {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 6em;
  margin-bottom: 1em;

  li {
    margin-right: 20px;
    height: 1.2em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }  
}

如何使此移动设备友好。截至目前，如果有 3 行，即使在 col-sm 大小上，它也会保持 3 行。我该怎么做才能在 col-sm 上无论有多少列，它在小屏幕尺寸上都变成一列。

Answer 1

媒体查询将为您完成，请参阅 fiddle 并根据需要调整它以适应您的需要:https://jsfiddle.net/16q2xr8k/28/

@media (max-width: 640px){
  .product-features  {
  display: inline;
  }  
}