顺风响应设计不适用

Question

我有这段代码，用于在桌面和上面并排显示两个表。但在移动显示器上，它们互相堆叠在一起。我设法使其中一种或另一种发挥作用。在sm:标记中被完全忽略，它只使用第一个。所以我不能让两者兼得。响应标记适用于代码中出现的所有其他时间，而不是这个场景。由于移动和桌面之间的任何原因，我不能在flex-col和flex-row之间进行更改。

编辑:看起来它现在在其他几个地方也不起作用，不仅仅是在这里，例如

。

<div class="container 2xl:max-w-screen-xl mx-auto pb-8">
    <h1 class="text-3xl font-bold text-gray-200">ID</h1>
    <p class="text-gray-400 italic">Time</p>

    <div class="flex flex-col sm:flex-row">
        <div class="flex flex-col sm:flex-row">
            <table id="Y_table" class="w-full mt-2 row-border table border border-gray-700 rounded">
                <thead class="bg-gray-800 text-gray-500 uppercase text-xs sm:flex-row">
                <tr>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                </tr>
                </thead>
            </table>
        </div>

        <div class="flex flex-col sm:flex-row">
            <table id="X_table" class="w-full mt-2 table row-border border border-gray-700 rounded">
                <thead class="bg-gray-800 text-gray-500 uppercase text-xs">
                <tr>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                    <th class="p-4 whitespace-nowrap">X</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

Answer 1

你头上有视图标签吗？

<meta name="viewport" content="width=device-width, initial-scale=1.0">