gpt4 book ai didi

why tailwind-css w-full className causing the div shrink?(为什么顺风-css w-Full类名称会导致div收缩?)

转载 作者:bug小助手 更新时间:2023-10-24 20:53:13 24 4
gpt4 key购买 nike



I am working on a next.js project. this is the div:

我正在做一个next.js项目。这是div:


<div className="relative z-10 max-w-10xl w-full items-center justify-between font-mono text-sm lg:flex flex-col">
<MarqueeComponent data={data}></MarqueeComponent>
</div>

this is how it looks in small size. I captured the full screen width:

这就是它在小尺寸上看起来的样子。我捕捉到了全屏宽度:


enter image description here


Now, I will just remove w-full

现在,我将删除w-Full


  <div className="relative z-10 max-w-10xl items-center justify-between font-mono text-sm lg:flex flex-col">
<MarqueeComponent data={data}></MarqueeComponent>
</div>

this is how it looks

这是它看起来的样子


enter image description here


I don't understand how using w-full causes this. this is its css

我不明白使用w-Full怎么会导致这种情况。这是它的css


.w-full {
width: 100%;
}

does not it mean that its width should be 100% at all times?

这不是说它的宽度在任何时候都应该是100%吗?


更多回答
优秀答案推荐

This problem may be caused by not adding the viewport meta tag to the head section.

此问题可能是由于未将视口元标记添加到Head部分造成的。


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>  

or can you try

或者你能试着


max-w-full  

更多回答

next.js automatically adds that tag. I get the correct behavior when I remove it but I dont understand why I get a wider full screen If I remove w-full

Next.js会自动添加该标记。当我删除它时,我得到了正确的行为,但我不明白为什么如果我删除w-Full,我会得到一个更宽的全屏

If there is a width in the parent container of the w-full tag you gave, this may be caused by this. I simply created the same issue. When the "width:100%" given to the image is removed, the image becomes larger. It shrinks when added. I guess it takes up the width of the visual container. jsfiddle.net/ridvansancak/sq0852ad

如果您给出的w-Full标签的父容器中有宽度,则可能是由于此原因造成的。我只是制造了同样的问题。当去掉赋予图像的宽度:100%时,图像变大。当添加时,它会收缩。我猜它占据了视觉容器的宽度。Jsfiddle.net/ridvansancak/sq0852ad

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com