具有“扩展”项目的响应式网格

Question

我有一个列表项网格，其中大多数都是超链接，但是当点击显示的子项时，一些项会导致下面的行出现。 我一直试图使网格响应，这样当屏幕宽度变小时，网格变成一列项目。但是我不能保持两种布局的扩展。

可以在以下位置查看有关如何对完整大小的网格起作用的示例：https://jsfiddle.net/au6bq6hj/

我用于网格的HTML是：

<div class="container">
    <ul class="main">
        <li>
            <a href="javascript:void(0);">1.0</a>
        </li>
        <li>
            <a href="javascript:void(0);">2.0</a>
            <ul>
                <li>
                    <a href="javascript:void(0);">2.1</a>
                </li>
                <li>
                    <a href="javascript:void(0);">2.2</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">3.0</a>
        </li>
        <li>
            <a href="javascript:void(0);">4.0</a>
        </li>
    </ul>
</div>

以下图片详细介绍了我尝试做的事情。第一个图像是扩展前的全宽网格，第二个图像是此网格扩展。第三个图像是扩展前的单列列表，第四个图像是这个，但项目2.0扩展为显示2.1和2.2。

当我有媒体查询使项目全宽时，我显示隐藏行的方法不起作用。 任何帮助都将不胜感激，我想我可能已经走投无路的想法，无法看到下一步该做什么。

Answer 1

您可以编写媒体查询，以使li代码的宽度响应。

在这种情况下，假设您希望当屏幕低于400px时列表为单列。接下来是我将在代码末尾添加的内容：

 @media (max-width:400px) {
li{width:90%;}

}

希望这对您的项目有所帮助。