如何让带旋转效果的Next.js+Tailwind广告栏实现全屏幕响应式？

针对你遇到的三个问题，直接给出修复方案：

1. 固定广告栏在屏幕底部 #

当前使用relative定位无法实现固定效果，替换为fixed定位并添加z-50，确保广告栏不会被其他内容遮挡：

<section className={`${styles.AdsBar} rotate-6 fixed bg-black text-white py-4 text-center bottom-0 left-0 right-0 z-50`}>

2. 适配所有屏幕尺寸（解决旋转后溢出问题） #

rotate-6会让元素旋转后超出视口范围，通过以下调整修复：

• 添加w-screen强制元素宽度匹配视口，避免旋转后左右留白或溢出
• 用origin-bottom-left调整旋转原点为左下角，减少右侧溢出
• 给内部flex容器加flex-wrap，让小屏上的链接自动换行，避免横向溢出

修改后的section和内部div代码：

<section className={`${styles.AdsBar} rotate-6 fixed bg-black text-white py-4 text-center bottom-0 left-0 w-screen z-50 origin-bottom-left`}>
  <div className="flex justify-center space-x-4 overflow-hidden flex-wrap px-4">

3. 移除边框 #

直接添加Tailwind的border-0类强制移除边框，同时在CSS模块中兜底设置border: none，避免全局样式继承：

<section className={`${styles.AdsBar} rotate-6 fixed bg-black text-white py-4 text-center bottom-0 left-0 w-screen z-50 origin-bottom-left border-0`}>

// style.module.css
.AdsBar{
    border-radius: 0px 24px 0px 34px;
    border: none;
}

完整修复代码 #

// HeroFooter.js
import { ChevronsRight } from "lucide-react";
import styles from "./style.module.css";
const HeroFooter = () => {
  return (
    <section className={`${styles.AdsBar} rotate-6 fixed bg-black text-white py-4 text-center bottom-0 left-0 w-screen z-50 origin-bottom-left border-0`}>
      <div className="flex justify-center space-x-4 overflow-hidden flex-wrap px-4">
        {Array.from({ length: 8 }).map((_, index) => (
          <a key={index} href="#" className="text-white px-4 flex gap-1 py-2">
            Get Started <span><ChevronsRight/></span>
          </a>
        ))}
      </div>
    </section>
  );
};

export default HeroFooter;

// style.module.css
.AdsBar{
    border-radius: 0px 24px 0px 34px;
    border: none;
}

关键说明：

• fixed + w-screen 确保广告栏始终固定在视口底部且宽度铺满屏幕
• origin-bottom-left 调整旋转原点，让旋转后的元素更贴合底部边界
• flex-wrap 实现小屏自动换行，避免横向内容溢出
• border-0 + border: none 双重保障移除边框
• z-50 防止广告栏被其他页面元素遮挡

内容的提问来源于stack exchange，提问作者Abdelkabir Ouadoukou