Tailwind CSS 列在移动设备中没有响应

Question

我正在使用 Tailwind CSS，对此完全陌生。我的页面中有 3 列，当测试平板电脑或移动设备时，这些列相互折叠并出现水平滚动。我希望它们在较小的屏幕上一个一个地落下。我想要 3 列（Content1 、 content2.1 .2 、 content 3.1 .2 ），第二列和第三列假设为 2 行。

<div class="grid grid-cols-4 gap-4 grid-rows-4">
 <div class="col-span-2 border border-solid border-gray-300 ">
  Content 1
 </div>
  <div class=" grid  gap-4">
    <div class="border border-gray-300 border-solid row-span-2">
     Content 2.1
    </div>    
    <div class="border border-gray-300 border-solid row-span-1">
     Content 2.2
    </div>     
  </div>
  <div class=" grid gap-4">
    <div  class="border border-gray-300 border-solid row-span-1">
     Content 3.1
    </div>
    <div class="border border-gray-300 border-solid row-span-2">
      Content 3.2
    </div>    
  </div> 
</div>

Answer 1

您没有提到响应式屏幕的网格列行为。下面的代码将起作用：

<div class="grid md:grid-cols-4 gap-4 grid-rows-4">
 <div class="col-span-2 border border-solid border-gray-300 ">
  Content 1
 </div>
  <div class="grid gap-4">
    <div class="border border-gray-300 border-solid row-span-2">
     Content 2.1
    </div>    
    <div class="border border-gray-300 border-solid row-span-1">
     Content 2.2
    </div>     
  </div>
  <div class=" grid gap-4">
    <div  class="border border-gray-300 border-solid row-span-1">
     Content 3.1
    </div>
    <div class="border border-gray-300 border-solid row-span-2">
      Content 3.2
    </div>    
  </div> 
</div>

这里我只是在

md:

之前添加了

grid-cols-4

。

md:

将使

grid-cols-4

类只能在中等尺寸的屏幕上使用。因此它不适用于较小的尺寸（手机/平板电脑）。您将获得所需的输出。