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个li点，其他有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

媒体查询会为您完成，请根据需要调整并调整以适合您的需要：https://jsfiddle.net/16q2xr8k/28/

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

响应无序列表

1 个答案: