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

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%;}

}

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