【问题标题】:Not able to increase height vertically using tailwindcss无法使用tailwindcss垂直增加高度
【发布时间】:2021-09-02 07:07:18
【问题描述】:

我无法垂直增加块的大小。

实际上,我想在将窗口大小从小型设备增加到更高时,垂直增加div的大小。

这是我的 tailwindcss 游乐场链接

https://play.tailwindcss.com/9Bs25IUgOu

谁能告诉我该怎么做?

我想在增加窗口大小的同时增加背景图像的大小和块的高度。

【问题讨论】:

  • 您是否尝试过 flex box 或 boostrap row with column?和 使其具有响应性

标签: html css layout responsive-design tailwind-css


【解决方案1】:

修改你的第一行代码

<div class="---">

<div class="---" style = "height: 100vh;">

【讨论】:

    【解决方案2】:

    试试这个,

    <div class="flex flex-col w-full bg-right-bottom bg-no-repeat bg-cover min-h-small bg-star-pattern-small">
      <div class="px-3 py-5 mx-4 text-center">
        <div>
          <h1 class="pt-5 text-2xl font-medium md:text-4xl lg:text-5xl xl:text-6xl">FREE COFFEE</h1>
          <h1 class="text-2xl font-medium leading-9 md:text-4xl lg:text-5xl xl:text-6xl">IS A TAP AWAY</h1>
        </div>
        <h3 class="mt-4 text-sm md:text-lg lg:text-xl xl:text-2xl">Lorem ipsum dolor sit amet consectetur.</h3>
        <button class="mt-8 bg-green-700 rounded-2xl">
          <p class="p-2 px-4 text-sm md:text-lg lg:text-xl xl:text-2xl font-semibold text-white">Join in the app</p>
        </button>
        <p class="mt-3 underline"><a href="#">or join online</a></p>
      </div>
    </div>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-02-24
      • 1970-01-01
      • 2016-09-20
      • 1970-01-01
      • 1970-01-01
      • 2016-06-09
      • 2017-10-02
      • 1970-01-01
      相关资源
      最近更新 更多