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>

但是您知道如何在小型设备中显示6个类别而不显示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计算得出。

Answer 2

您可以通过媒体查询来实现。您只需选择一个正确的设备的断点像这样的东西。

 @media only screen and (max-width: 600px) {
            .ullist li:nth-child(3) {
                display: none
            }
            .ullist li:nth-child(4) {
                display: none
            }
            .ullist li:nth-child(5) {
                display: none
            }
            .ullist li:nth-child(6) {
                display: none
            }

        }

<ul class="ullist">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>

</ul>

上面的代码将在设备宽度大于600时显示所有六个列表，并在小型设备上隐藏最后四个。因此，根据您的需要，您可以选择断点并使用此代码。

如果需要，可以在scss中循环所有li。这是如何用于在CSS中循环

http://thesassway.com/intermediate/if-for-each-while

在移动和中型设备中显示较少的类别（列表项）

2 个答案: