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:
这就是它在小尺寸上看起来的样子。我捕捉到了全屏宽度:
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
这是它看起来的样子
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
我是一名优秀的程序员,十分优秀!