我想得到一些关于使用自定义媒体分隔符的带div定位的Tailwind的建议。目前，在350 px（xs）以上的屏幕上，主页布局是flex，方向是flex-col。然而，当我在1100 px（lg）以上的大屏幕上将其设置为flex-row（flex）时，它仍然是flex-col，并且其中一个flex子项隐藏了另一个。
当我测试我的自定义屏幕是否能在每次中断时改变字体颜色（xs-lg）时，它起作用了。这意味着我的屏幕设置得很好。只是看起来它没有记录定位的变化，特别是在Flex和填充方面。
抱歉，如果这是显而易见的，但我已经阅读了顺风文档，因为他们的工作与颜色的变化，这意味着休息设置的权利。所以我可能只是错过了一些明显的。
```javascript
export default function HomeHero(){
return(
<div className={styles.HeroContainer}>
<div className={styles.HeroText}>
<div className={styles.title}>Stay connected off-grid</div>
<div className={styles.text}>paragraph text</div>
<form className={styles.form} action="/send-data-here" method="post">
<input type="text" className={styles.input} name="first" placeholder="Email Address"/>
<input type="text" className={styles.input} name="last" placeholder="Password"/>
<div className={styles.Button}><button type="submit">Log In</button></div>
<div className={styles.forgot}><Link href="/forgotpassword">Forgot your password?</Link></div>
</form>
</div>
<div className={styles.HeroImage}></div>
</div>
)
}
const styles = {
HeroContainer: 'flex xs:flex-col lg:flex-col lg:min-h-screen',
HeroText: 'flex flex-col border-2 text-left xs:p-10 md:p-24 w-1/3 lg:mt-12 lg:pr-36 lg:pl-36',
HeroImage: 'flex w-2/3 bg-hero bg-center bg-contain bg-no-repeat bg-top-32 self-stretch min-h-[500px]'
}
1条答案
按热度按时间t98cgbkg1#
一开始我被难倒了，直到我意识到
HeroText上的flex-col如果不是一个flex容器就什么也做不了。现在我看到了它和你的例子，我认为这就是问题所在。你的flex方向类在容器中，它只是在
HeroTextdiv上设置flex方向。你需要把这些flex方向工具移到HeroText中。下面是一个Tailwind Play的例子：https://play.tailwindcss.com/MmfOrXgVa0（旧链接）你可能也想重新考虑
HeroImage的风格。看起来你想绝对定位它。根据评论更新：
你的评论改变了一些事情。
flex-direction已经用你的代码更新了。你仍然有一些额外的类，但这并没有阻止它的工作。我相信，真实的的问题是关于使用lg:bg-hero。除非你在你的配置中添加它，否则该类不会做任何事情，也不会连接到lg断点。此外，您在两个元素上定义了
flex-1和宽度，而这些内容与flex-1的内容相互冲突。因此，当全屏显示时，背景宽度只有50%，而内容宽度不足以换行，因此您看不到背景。如果你解决了这些问题，你应该可以开始了。下面是一个在顺风游戏中的工作示例：https://play.tailwindcss.com/kF7mi27UUC
另外，这里有一些更新的JS类。我在
HeroImage类中添加了一些类，这样它就会显示出来：