【问题标题】:tailwindCss : how to use lg-px-4tailwindCss:如何使用 lg-px-4
【发布时间】:2021-07-04 06:15:30
【问题描述】:

我只想将 px-4 用于页脚

lg:px-4

但它不起作用

<footer class="footer py-5 text-white bg-gray-800">
<div class="flex flex-col  items-center justify-between lg:flex-row  max-w-6xl mx-auto 
lg:space-y-0 space-y-3">
<div class="space-x-4  lg:px-4">
<a href="#" target="_blank"><i class="icon-brand-instagram text-lg  text-white text-opacity-75  text-md hover:text-white"></i></a>
</div>
</div>
</footer>

My sample image

【问题讨论】:

  • 可能你的屏幕没有超过1024px

标签: tailwind-css


【解决方案1】:

px 将指定水平填充

而lg指定响应式屏幕的断点

lg = 1024px @media (min-width: 1024px) { ... }

它不起作用可能是因为您的屏幕尺寸。尝试在 chrome 的开发工具中打开它并更改屏幕尺寸并将其设置为低于/高于 1024。它会工作

【讨论】:

    【解决方案2】:

    根据official 文档,lg 前缀值适用于大于 1024 像素的屏幕。 因此,如果您的屏幕尺寸小于 1024 像素,您可能看不到效果。 在浏览器中快速缩小可以判断是否应用了填充。

    您也可以在tailwind.config.js 文件中使用custom breakpoints 更改此默认值

    【讨论】:

      猜你喜欢
      • 2021-11-05
      • 2020-12-03
      • 2022-06-14
      • 2020-05-16
      • 2013-10-02
      • 1970-01-01
      • 2016-11-09
      • 2023-01-29
      • 2021-07-07
      相关资源
      最近更新 更多