css - 在移动和中型设备中显示更少的类别(列表项)

Question

我有这段代码来显示带有类别的菜单。

  <div class=" d-md-block">
        <div class="container">
            <div class="row">
                <div class="col p-0 m-0">
                    <ul class="Categories__Menu">
                        @foreach($categories->take(6) as $category)
                            <li class="">
                                <a href="javascript:void(0)" name="category" id="{{$category->id}}">{{$category->name}}</a>
                            </li>
                        @endforeach

                        <li><a  data-toggle="modal" id="showCategories" data-target=".bd-example-modal-lg" href="">More <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

但是您知道如何在小型设备上只显示 2 个列表项而不是显示 6 个类别吗？而在中型设备中，不是显示 6 个类别，而是只显示 3 个列表项？

Answer 1

这是一个简单的解决方案，中号 1020 像素和小号 768 像素，但您应该根据需要更改它们:

    @media ( max-width: 1020px) { 
         .Categories__Menu > li:nth-child(n+3) {
             display: none;
         }
    }

    @media ( max-width: 768px) { 
         .Categories__Menu > li:nth-child(n+2) {
             display: none;
         }
    }

在 :nth-child() 中，您可以使用带有 n 的数学表达式，例如 -3n+2，它将从 n=0 开始计算。